Click row of a jQuery Datatable and load a page with id information

Question

Click row of a jQuery Datatable and load a page with id information

Navigation

#1 by (1 votes)

1

I am listing information from my database in a Datatable with jQuery and until then everything is ok.

What I want to do is to click on the 'row' of Datatable load on that div all the information of that ID that was presented in the table. An example of what I want to do is type gmail that appears the emails in list form and when the person clicks loads it.

How can I do this with a Datatable?

I'm displaying 10 items on the first page of the table, and when I click on the row, it displays the row I want. The problem is when I go to the second or third page and click on the line the JavaScript alert does not work.

$(function() {
     var oTable = $("#tabelaaberto").dataTable({

        "oLanguage": {

            "sEmptyTable": "Nenhum registro encontrado",
            "sInfo": "Exibindo de _START_ até _END_ no total de _TOTAL_ registros.",
            "sInfoEmpty": "",
            "sInfoFiltered": "(Filtrados de _MAX_ registros)",
            "sInfoPostFix": "",
            "sInfoThousands": ".",
            "sLengthMenu": "_MENU_ resultados por página",
            "sLoadingRecords": "Carregando...",
            "sProcessing": "Processando...",
            "sZeroRecords": "Nenhum registro encontrado.",
            "sSearch": "Pesquisar: ",
            "oPaginate": {
                "sNext": "Próximo",
                "sPrevious": "Anterior",
                "sFirst": "Primeiro",
                "sLast": "Último"
            },
            "oAria": {
                "sSortAscending": ": Ordenar colunas de forma ascendente",
                "sSortDescending": ": Ordenar colunas de forma descendente"
            }               
        }       
    });

    $(document).ready(function(e) {

        $("#tabelaaberto tbody td").on('click',function(){
            var nTr = $(this).parents('tr')[0];
            var aData = oTable.fnGetData(nTr);
            alert(aData[0]);

        });
    });                
});

javascript jquery jsp

asked by anonymous 17.09.2014 / 16:14

1 answer

How do I read an assets file as a string Make more than one condition annotation asp.net mvc

score 1 · Accepted Answer

Friend, you're using the JQuery DataTables OK ?? DataTables

As you do not have many details in your question, I assume it's just for displaying the information, but if it's not, it's easy to change. You will already have the path of stones. I will display the information in a Dialog on the DataTable.

You will have to do the following, in DataTables there is the fnDrawCallback function. Inside it we will have the code that you want to execute. It will look something like this:

oTable is how I declare my dataTable, just change to yours.

"fnDrawCallback" : function() {
    $('td.readonly').on('click', function (e) {

        var INFO_01 = oTable.fnGetData($(this).parents('tr')[0])[0];
        var INFO_02 = oTable.fnGetData($(this).parents('tr')[0])[1];
        var INFO_03 = oTable.fnGetData($(this).parents('tr')[0])[2];
        var INFO_04 = oTable.fnGetData($(this).parents('tr')[0])[3];


          dialog = $( "#users-contain" ).dialog({
          autoOpen: false,
          height: 500,
          width: 'auto',
          title: "Infos",
          modal: true,
          open: function( event, ui ) {

              $("#users tbody").empty();

             $( "#users tbody" ).append( "<tr>" +
                  "<td>" + INFO_01 + "</td>" +
                  "<td>" + INFO_02 + "</td>" +
                  "<td>" + INFO_03 + "</td>" +
                  "<td>" + INFO_04 + "</td>" +
                  "</tr>" );

          },
          close: function( event, ui ) {
              $("#users tbody").empty();
           },
          buttons: {
            "OK": function(){
                dialog.dialog( "close" );           
            },
            Cancel: function() {
                dialog.dialog( "close" );
            }
          }
        });

          dialog.dialog("open");
  } );
}

In addition to that we need an HTML to create the DIV to be displayed.

<div id="users-contain">
    <h1>Dados:</h1>
    <table id="users">
        <thead>
            <tr>
                <th>INFO_01</th>
                <th>INFO_02</th>
                <th>INFO_03</th>
                <th>INFO_04</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>

I hope I have helped, anything put there.

--------------- New font -----------------

$(function() {
     var oTable = $("#tabelaaberto").dataTable({

        "oLanguage": {

            "sEmptyTable": "Nenhum registro encontrado",
            "sInfo": "Exibindo de _START_ até _END_ no total de _TOTAL_ registros.",
            "sInfoEmpty": "",
            "sInfoFiltered": "(Filtrados de _MAX_ registros)",
            "sInfoPostFix": "",
            "sInfoThousands": ".",
            "sLengthMenu": "_MENU_ resultados por página",
            "sLoadingRecords": "Carregando...",
            "sProcessing": "Processando...",
            "sZeroRecords": "Nenhum registro encontrado.",
            "sSearch": "Pesquisar: ",
            "oPaginate": {
                "sNext": "Próximo",
                "sPrevious": "Anterior",
                "sFirst": "Primeiro",
                "sLast": "Último"
            },
            "oAria": {
                "sSortAscending": ": Ordenar colunas de forma ascendente",
                "sSortDescending": ": Ordenar colunas de forma descendente"
            }   
        },
        "fnDrawCallback" : function() {
            $('#tabelaaberto tbody td').on('click', function (e) {

                var INFO_01 = oTable.fnGetData($(this).parents('tr')[0])[0];
                var INFO_02 = oTable.fnGetData($(this).parents('tr')[0])[1];
                var INFO_03 = oTable.fnGetData($(this).parents('tr')[0])[2];
                var INFO_04 = oTable.fnGetData($(this).parents('tr')[0])[3];

                alert("INFO 1: " + INFO_01 + "INFO 2: " + INFO_02 + "INFO 3: " + INFO_03 + "INFO 4: " + INFO_04);               

          } );
        }
    });
});