"Col is undefined" when using table.rows.add

Navigation
1

I'm trying to get a json from a AJAX request to insert it into the table but every time I run table.rows.add

Table Code: 

<table id="datatables" class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%">
   <thead>
       <tr>
           <th>Id</th>
           <th>Uniforme</th>
           <th>Modelo</th>
           <th>Tamanho</th>
           <th>Cor</th>
           <th>Fornecedor</th>
           <th>Contrato</th>
           <th>Quantidade</th>
           <th>Custo</th>
           <th>Localização</th>
           <th class="disabled-sorting text-right">Actions</th>
       </tr>
   </thead>
   <tbody class="tbody">
       <tr>
           <td>aaaa</td>
           <td>aaaa</td>
           <td>aaaa</td>
           <td>aaaa</td>
           <td>aaaa</td>
           <td>aaaa</td>
           <td>aaaa</td>
           <td>aaaa</td>
           <td>aaaa</td>
           <td>aaaa</td>
           <td class="text-right">
               <a href="#" class="btn btn-simple btn-info btn-icon like"><i class="material-icons">favorite</i></a>
               <a href="#" class="btn btn-simple btn-warning btn-icon edit"><i class="material-icons">dvr</i></a>
               <a href="#" class="btn btn-simple btn-danger btn-icon remove"><i class="material-icons">close</i></a>
           </td>
       </tr>

   </tbody>
   <tfoot>
       <tr>
         <th>Id</th>
         <th>Uniforme</th>
         <th>Modelo</th>
         <th>Tamanho</th>
         <th>Cor</th>
         <th>Fornecedor</th>
         <th>Contrato</th>
         <th>Quantidade</th>
         <th>Custo</th>
         <th>Localização</th>
         <th class="disabled-sorting text-right">Actions</th>
       </tr>
   </tfoot>
</table>

Jquery: 

 $('#datatables').DataTable({
        "pagingType": "full_numbers",
        "lengthMenu": [
            [10, 25, 50, -1],
            [10, 25, 50, "All"]
        ],
        responsive: true,
        language: {
            search: "_INPUT_",
            searchPlaceholder: "Search records",
        },
        columns: [
           { data: 'Id' },
           { data: 'Uniforme' },
           { data: 'Modelo' },
           { data: 'Tamanho' },
           { data: 'Cor' },
           { data: 'Fornecedor' },
           { data: 'Contrato' },
           { data: 'Quantidade' },
           { data: 'Custo' },
           { data: 'Localização' }
         ]

    });

    $.get("http://localhost/infinity/assets/php/list-uniforms.php", function(data){
        uniforms  = JSON.parse(data);
        console.log(uniforms);

        table.rows.add(uniforms).draw();

    });

Result:

    
asked by anonymous 25.01.2018 / 01:15

1 answer

1

This happens when you try to pass different amount of columns to columns: than actually exists in the table.

To fix this, simply add the last column "Actions" to columns: : 

columns: [
  { data: 'Id' },
  { data: 'Uniforme' },
  { data: 'Modelo' },
  { data: 'Tamanho' },
  { data: 'Cor' },
  { data: 'Fornecedor' },
  { data: 'Contrato' },
  { data: 'Quantidade' },
  { data: 'Custo' },
  { data: 'Localização' }, // <-- não esqueça a vírgula aqui
  { data: 'Actions' } // <-- faltou esse aqui
]
    
25.01.2018 / 01:42
java.lang.ClassNotFoundException: Could not load requested class: com.mysql.jdbc.Driver How do I extract values from a json to insert into a table in PostgreSQL