4 votes

Datatable Error Cannot read property 'mData' of undefined

I am displaying the data from my Database in a table using javascript the data is being displayed correctly, but the options are not being displayed. DataTable . In the browser console I get the following error message

Uncaught TypeError: Cannot read property 'mData' of undefined
at HTMLTableCellElement.<anonymous> (datatables.js:1184)
at Function.each (jquery-3.2.1.min.js:2)
at r.fn.init.each (jquery-3.2.1.min.js:2)
at HTMLTableElement.<anonymous> (datatables.js:1181)
at Function.each (jquery-3.2.1.min.js:2)
at r.fn.init.each (jquery-3.2.1.min.js:2)
at r.fn.init.DataTable [as dataTable] (datatables.js:881)
at r.fn.init.$.fn.DataTable (datatables.js:15082)
at Object.success (pagos_tipos.js:14)
at i (jquery-3.2.1.min.js:2)

The data is displayed using Javascript

 $.post(url+"C_Pagos_Tipos/getPagos",
 function(data){

 var obj = JSON.parse(data);
 $.each(obj, function(i, item){
 $("#tblPagos").append(
  '<tr>'+
  '<td>'+item.id+'</td>'+
  '<td>'+item.tipo_pago+'</td>'+
  '<td><a href="#" title="Editar" data-toggle="modal" data-target="#modalEditar" onClick="selPagos(\''+item.id+'\',\''+item.tipo_pago+'\');"><i style="color:#555;" ></i> Editar</a></td>'+
  '</tr>'
);
});
$("#tblPagos").DataTable({

'paging': true,
'info': true,
'filter': true

});
});

**introducir la descripción de la imagen aquí**

Edited: added the html

      <div class="table-responsive">
        <table class="table table-striped" id="tblPagos">
          <thead>
            <tr>
              <th>#Código</th>
              <th>Nombre</th>
            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>

      </div>

At the end of the HTML

 <script type="text/javascript">
  var url = "<?php echo base_url(); ?>";
 </script>

 <script src="<?php echo base_url();?>assets/js/jquery-3.2.1.min.js"></script>

 <link rel="stylesheet" type="text/css" href="<?php echo base_url();?>assets/datatables/datatables.css">
 <script type="text/javascript" charset="utf8" src="<?php echo base_url();?>assets/datatables/datatables.js"></script>

 <script src="<?php echo base_url();?>assets/js/pagos_tipos.js"></script>

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">

1 votes

How do you have your HTML ?

0 votes

I just edited it

0 votes

How many columns your route returns getPagos

20voto

Dev. Joel Points 20672

This is a common mistake. Since the condition for a DataTable is that the number of columns in the thead is equal to that of the tbody has only two in the thead but adds an additional button to the tbody therefore exceeds the columns by one, then your error can be solved by simply adding one th empty at the end to equalize the columns.

1 votes

Only comment: it is not the number of rows but the number of columns that must be equal.

HolaDevs.com

HolaDevs is an online community of programmers and software lovers.
You can check other people responses or create a new question if you don't find a solution

Powered by:

X