1

Boa tarde Galera,

Estou com problema ao usar o dataTable() em uma tabela criada dinamicamente.

no HTML eu tenho o corpo da tabela.

<table class="table table-sm table-hover" id="mytable">
  <thead class="text-center">
    <th>ID</th>
    <th>Módulo</th>
    <th>Quantidade OP</th>
    <th>Código</th>
    <th>Quantidade</th>
    <th>Data</th>
    <th>Status</th>
    <th>NF</th>
  </thead>
  <tbody id="tabela_full" class="text-center">
</tbody>
</table>

E no .JS eu acrescento as <tr> e as <td>

Aí vem o problema, como eu acrescento as linhas e colunas após o DOM ser criado?

$("#mytable").dataTable({paging: false}); 

não reconhece as linhas e colunas da tabela.

Alguém pode me ajudar? muito obrigado.

1
  • Qual função está usando para inserir as linhas ? 30/05/2019 às 20:03

2 Respostas 2

0

Crie uma função com esse seu código js e chame ela quando a pagina toda for carregada.

Como fazer:

No body inclua o atributo onload, desta maneira:

<body onload = "suaFunçãoDeCriarTabela()">

Dentro do < script > inclua isso:

function suaFunçãoDeCriarTabela(){

   //Seu código aqui (Só será iniciado quando a pagina estiver carregada)
}

Assim adicionará itens à tabela só quando a pagina inteira for carregada

4
  • <body onload = "showAlltable()"> está apresentando erro de Uncaught ReferenceError: showAlltable is not defined, mas no meu arquivo js a função já está criada 30/05/2019 às 15:46
  • Edite sua pergunta adicionando o código da função "showAlltable()". Pode haver algum erro nele. 30/05/2019 às 15:53
  • Seu código js está na Head ou dentro do Body? 30/05/2019 às 15:54
  • Ele está no head 30/05/2019 às 16:07
0

Sei que já faz tempo, mas talvez isso ainda seja útil para alguém:

Pelo que entendi, a sua $("#mytable").dataTable({paging: false}); não reconhece as novas linhas incluídas - é desta forma que precisa ser mesmo. Quando vc trabalha com Data Table as alterações são feitas de forma semelhante a um "DataSet", ou seja: vc faz uma cópia dos dados, altera o que precisa nesta cópia e depois salva as suas alterações na tabela definitiva. Para incluir novas linhas a maneira mais fácil é utilizar um objeto que contenha um atributo para cada coluna da sua tabela. Além disso , sempre que vc adiciona novas linhas será necessário redesenhar a tabela (utilizando o ".draw()" - dataTable.draw()) para que os dados novos sejam renderizados e apareçam na tela.

Exemplo: Considere uma tabela chamada "myTable" com os campos nome, cpf e estadoCivil. Desta forma crie um objeto cliente com estes atributos:

modelo objeto cliente

Para adicionar este objeto na data table temos que utilizar uma função semelhante a esta:

function addRowsDataTable(cliente){
//criando o "data set" - captura todos os dados da DataTable original e inclui eles na variavel dTable (é um array de objetos)
    dTable = $('#myTable').DataTable();
  //incluindo o objeto cliente
  dTable.rows.add( 
            [{
                "nome"              : cliente.nome,                 //0
                "cpf"               : cliente.cpf,              //2
                "estadoCivil"   : cliente.estadoCivil
       }]
  );
    //renderizando novamente a dataTable com os novos dados.
    dTable.draw();  
}

OBS: lembre-se de que na sua página HTML é necessário incluir as referências da data table:

<script type="text/javascript" charset="utf8" src="/DataTables/datatables.js"></script>

e também:

<link rel="stylesheet" type="text/css" href="/DataTables/datatables.css">

Como fazer? Chame a função addRowsDataTable e passe como parâmetro um objeto cliente com os atributos necessários. A função vai adicionar uma linha com os dados do cliente e renderizar novamente a tabela.

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 .