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.