Dynamically created datatable and tables problem

Asked

Viewed 120 times

1

Good afternoon Galera,

I’m having trouble using the dataTable() in a dynamically created table.

in the HTML i have the table body.

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

And in the .JS I add the <tr> and the <td>

Here comes the problem, as I add the rows and columns after the DOM be created?

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

does not recognize the rows and columns of the table.

Can someone help me? Thank you very much.

javascript html jquery

  • What function are you using to insert the rows ?

2 answers

0

Create a role with this code js and call her when the whole page is loaded.

How to do:

In body include the onload attribute, this way:

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

Within the < script > include that:

function suaFunçãoDeCriarTabela(){

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

So add items to the table only when the entire page is loaded

  • <body onload = "showAlltable()"> is showing Uncaught error Referenceerror: showAlltable is not defined, but in my js file the function is already created

  • Edit your question by adding the code of the "showAlltable()" function. There may be an error in it.

  • Your code js is at Head or inside Body?

  • He’s in the head

0

I know it’s been a while, but maybe that’s still useful to someone:

From what I understand, yours $("#mytable").dataTable({paging: false}); does not recognise the new lines included - this is how it needs to be. When you work with Data Table the changes are made in a similar way to a "Dataset", that is: you make a copy of the data, change what you need in this copy and then save your changes in the definitive table. To include new lines the easiest way is to use an object that contains an attribute for each column of your table. Also, whenever you add new lines you will need to redesign the table (using ". draw()" - datatable.draw()) for the new data to be rendered and appear on the screen.

Example: Consider a table called "myTable" with the fields name, Cpf and Civil state. This way create a client object with these attributes:

modelo objeto cliente

To add this object to the data table we have to use a function similar to this:

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

NOTE: remember that in your HTML page you need to include the data table references:

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

and also:

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

How to do? Call the function addRowsDataTable and pass as parameter an object client with the necessary attributes. The function will add a line with the client data and render the table again.

Browser other questions tagged javascript html jquery

You are not signed in. Login or sign up in order to post.