0

Estou com a seguinte situação, quando insiro os dados oriundos do banco de dados, a minha tabela é populada da seguinte forma:

inserir a descrição da imagem aqui

E aparece essa mensagem: "No data available in table", como se os dados que são inseridos não fossem para a tabela.

O código do HTML é esse:

<table id="dataTable" class="table  table-condensed table-hover table-striped table-responsive">
                    <thead>
                        <tr>
                            <th>Código</th>
                            <th>Nome</th>
                            <th>CNPJ</th>
                            <th>E-mail</th>
                            <th>Responsável</th>

                        </tr>
                    </thead>

                <tbody></tbody>                
             </table>

E o código do java script é esse:

$(document).ready(function() {

    $.ajax({
        url: 'http://localhost:8080/exemplo',
        data: {},
        dataType: "json",
            cache: false,
            success: function (data) {
            $.each(data, function (i, val) {
                var tr = "<tr>" +
                    "<td>"+ val.id + "</td>" +
                    "<td>"+ val.id + "</td>" +
                    "<td>"+ val.id + "</td>" +
                    "<td>"+ val.id + "</td>" +
                    "<td>"+ val.id + "</td>" +

                    "</tr>";
                $(tr).appendTo('tbody');

            });
        }
    });   
});

Logo as funções da tabela como paginação e pesquisa também não funcionam. Porém se eu insiro os dados manualmente no HTML entre as tags tbody a tabela funciona normalmente. Alguém sabe do que se trata?

Agradeço desde já a ajuda.

2
  • simplemente voce tem 6 tags TH, mas $.each so esta colocando 5 TD dentro de cada TR. Acho que pode ser isso Commented 13/02/2017 às 21:08
  • Olá, eu fiz o teste e não faz diferença, o erro persiste. Commented 13/02/2017 às 21:55

1 Resposta 1

1

Você está utilizando o componente (jQuery DataTables) para "gerenciar" os dados da tabela. Porem está incluído linhas manualmente. Esses dados, incluindo após a inicialização do DataTable, não são reconhecidos por ele. Talvez você não tenha reparado. Mas alem do problema com a mensagem, estas linhas não são levadas em conta na páginação, ordenação ou busca.

Aqui tem um exemplo bem simples de como deve ser utilizados os recursos do componente para a criação de novas linhas:

Aplicado ao seu problema sem a requisição Ajax, pois o código fornecido não possibilita reproduzir este cenário.

var t = $('table').DataTable();
t.rows.add( [[ 
       "1",
       "João",
       "123.456",
       "teste@teste",
       "aaaaaaaaa"      
        ]
      ]).draw();
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<table id="dataTable" class="table  table-condensed table-hover table-striped table-responsive">
                    <thead>
                        <tr>
                            <th>Código</th>
                            <th>Nome</th>
                            <th>CNPJ</th>
                            <th>E-mail</th>
                            <th>Responsável</th>

                        </tr>
                    </thead>

                <tbody></tbody>                
             </table>

Porem, ao trabalhar dessa forma, teu sistema perderá desempenho quando houver muitos registros. Independentemente de estar utilizando Ajax.

Para grandes volumes de dados, recomendo utilizar um outro recurso do componente. Documentação aqui. Porem, vale lembrar que dessa forma você estará passando a responsabilidade de controlar a paginação e fazer a ordenação para o servidor. Portando terá um pouco mais de trabalho.

1
  • Obrigado pela ajuda, funcionou certinho! Porém vou seguir sua dica, pois irei lidar com uma grande quantidade de dados. Commented 14/02/2017 às 17:56

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 .