Click line from a jQuery Datatable and load a page with id information

Question

I am listing information from my database in a datatable with jQuery and so far everything is ok.

What I want to do is by clicking on the 'Row' from Datatable click on that div all the information of that ID that was shown in the table. An example of what I want to do is type the gmail that appears the emails in list form and when the person clicks 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]);

        });
    });                
});

Answer 1

Friend, you are using Jquery Datatables OK?? Datatables

Since you don’t have a lot of details in your question, I assume it’s just to display the information, but if it’s not, it’s easy to change. You’ll have the stone path. I will display the information in a Datatable Dialog.

You will have to do the following, in Datatables there is the function of fnDrawCallback. Inside it we will have the code you want to execute. That it will be something like this:

oTable is as I declared my datatable, just change to your.

"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 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 helped, something put there.

--------------- New source -----------------

$(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);               

          } );
        }
    });
});