Uncaught TypeError: Cannot read property 'aDataSort' of undefined

Question

i am working on pagination and i am using DataTables plugin , on some tables it's work but on some tables it gives error:

Uncaught TypeError: Cannot read property 'aDataSort' of undefined

my page script looks like:

$(document).ready(function() {
     $('.datatable').dataTable( {
        "scrollY":        "200px",
        "scrollCollapse": true,
        "info":           true,
        "paging":         true
    } );
} );

//HTML code

<table class="table table-striped table-bordered datatable">
   <thead>
        <tr>
          <th><?php echo lang('date_label')?></th>
          <th><?php echo lang('paid_label')?></th>
          <th><?php echo lang('comments_label');?></th>
        </tr>
   </thead>
   <tbody>
      <?php foreach ($payments as $pay): ?>
      <tr>
        <td><?php echo dateformat($pay['time_stamp'], TRUE);?></td>
        <td><?php echo format_price($pay['amount']);?></td>
        <td><?php echo $pay['note'];?></td>
      </tr>
      <?php endforeach?>
   </tbody>
</table>

no idea how the problem comes ,i know this is very common error but i search and found nothing supporting my problem .
does anyone knows the solution ?

Answer 1

use something like the following in your code to disable sorting on DataTables (adapted from a project of mine which uses latest DataTables)

$(document).ready(function() {
     $('.datatable').dataTable( {
        'bSort': false,
        'aoColumns': [ 
              { sWidth: "45%", bSearchable: false, bSortable: false }, 
              { sWidth: "45%", bSearchable: false, bSortable: false }, 
              { sWidth: "10%", bSearchable: false, bSortable: false } 
        ],
        "scrollY":        "200px",
        "scrollCollapse": true,
        "info":           true,
        "paging":         true
    } );
} );

the aoColumns array describes the width of each column and its sortable properties, adjust as needed for your own table (number of) columns.

Answer 2

I faced same issue and later found a typing mistake in "targets" property under columnDefs. See below example,

WRONG code below,

{
 "name": "firstName",
 "target": [1],
 "visible": false
}

Correction - missed 's' in targets :(

{
 "name": "firstName",
 "targets": [1],
 "visible": false
}

Looks like this error occurs when something causing columns not getting initialized. I checked that event 'preInit.dt' is not fired in this case.

Hope this helps someone.

Answer 3

I ran into this issue using KnockoutJS because the columns were not yet defined when the javascript was trying to apply the DataTable to it. My approach with knockoutJS was to move my data-bind code into a knockout template and use the afterRender event to apply the DataTable to the table.

Here is a link to the knockoutJS docs for the template afterRender event.

Here is what my data-bind looks like:

<div data-bind="template: { name: 'schedule-table', data: $data, afterRender: setupDataTable }"></div>

There was one more trick. In the setupDataTable function, the table still isn't setup completely, (I was trying to get the fixedHeaders and the widths weren't setup yet). So I called setTimeout with a 0 millisecond delay to get the code to run on the first idle cycle.

Here is my setupDataTable:

function setupDataTable() {
    setTimeout(function() {
        $("#schedule").DataTable({fixedHeader: true});
    }, 0);
}

Hope this helps somebody else looking for a knockoutJS solution and running into the same problem I ran into.

Answer 4

This error showed up for me, I believe because my "mData" and "sTitle" were undefined.