1

Estou listando informações do meu banco de dados em uma Datatable com jQuery e até aí está tudo ok.

O que eu quero fazer é ao clicar na 'row' da Datatable carregar naquela div todas as informações daquele ID que foi apresentado na tabela. Um exemplo do que quero fazer é tipo o gmail que aparece os emails na forma de lista e quando a pessoa clica carrega ele.

Como consigo fazer isso com uma Datatable?

Estou exibindo 10 itens na primeira página da tabela e, quando clico na linha, exibe a linha que eu quero. O problema é quando eu vou para a segunda ou terceira página e clico na linha o alert do JavaScript não funciona.

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

        });
    });                
});
3
  • Decerto você terá que escrever algum JavaScript para detectar o clique e usar Ajax para carregar novos dados sob demanda. Você está familiarizado com isso? Na sua pergunta, faltou colar o link de exemplo.
    – Caffé
    Commented 17/09/2014 às 17:09
  • 1
    @brasofilo Não é duplicata, pois esta pergunta é especificamente sobre o plugin DataTables
    – user7261
    Commented 17/09/2014 às 17:59
  • Por favor, inclua o código do que você conseguiu fazer até aqui. Você está montando toda a <table> e depois inicializando o plugin? Ou está usando a opção de puxar os dados por AJAX?
    – user7261
    Commented 17/09/2014 às 18:00

1 Resposta 1

1

Amigo, você está utilizando o JQuery DataTables OK?? DataTables

Como não tem muitos detalhes na sua pergunta, presumo que seja apenas para exibir as informações, mas caso não seja é fácil de alterar. Já terá o caminho das pedras. Irei exibir as informações em uma Dialog sobre o DataTable.

Você terá que fazer o seguinte, no DataTables existe a função de fnDrawCallback. Dentro dele teremos o código que você quer executar. Que será algo semelhante a isto:

oTable é como declarei minha dataTable, basta alterar para a sua.

"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");
  } );
}

Além de que precisamos de um HTML para criar a DIV a ser exibida.

<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>

Espero ter ajudado, qualquer coisa posta aí.

--------------- Novo fonte -----------------

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

          } );
        }
    });
});
11
  • Poderia me ajudar com a pergunta que fiz abaixo ?
    – Pedro A.
    Commented 17/09/2014 às 18:38
  • @PedroA. Adiciona o "fnDrawCallback" a seu exemplo... Logo abaixo do "oAria", que ira funcionar perfeitamente. Commented 17/09/2014 às 18:40
  • @PedroA. Adicionei o novo fonte a resposta... direto ao seu método. De uma olhada. Qualquer coisa grita aí. Commented 17/09/2014 às 18:48
  • Fernando, não da certo da sua forma. Estou usando essa template aqui almsaeedstudio.com/AdminLTE e para comunicar com o banco JSP.
    – Pedro A.
    Commented 17/09/2014 às 18:57
  • @PedroA. Aqui funciona, mas no CLICK utilizo $('td.readonly').on('click', function (e) { Adiciono Classes as colunas usando o "aoColumns" : [ { "sClass" : "readonly", "sTitle": "ID", "aTargets": [0] } ]. Tentou debugar? Aparece algum erro? Commented 17/09/2014 às 19:04

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .