Uncaught TypeError: Cannot read property 'aDataSort' of undefined

Question

我正在研究分页，我正在使用 DataTables 插件，在某些表上它工作但在某些表上它给出错误：

Uncaught TypeError: Cannot read property 'aDataSort' of undefined

我的页面脚本如下所示：

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

//HTML代码

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

不知道问题是怎么来的，我知道这是一个很常见的错误，但我搜索并没有找到任何支持我的问题的东西。
有谁知道解决方案吗？

Answer 1

在您的代码中使用类似于以下内容的代码来禁用对 DataTables 的排序（改编自我的一个使用最新 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
    } );
} );

aoColumns 数组描述了每列的宽度及其 sortable 属性，根据需要调整您自己的 table（列数）。

Answer 2

我遇到了同样的问题，后来在 columnDefs 下的 "targets" 属性中发现了一个输入错误。见下面的例子，

下面的代码错误，

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

更正 - 未达到目标 's' :(

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

看起来这个错误发生在导致列未被初始化的情况下。我检查过在这种情况下事件 'preInit.dt' 没有被触发。

希望这对某人有所帮助。

Answer 3

我运行使用 KnockoutJS 解决了这个问题，因为当 javascript 试图将 DataTable 应用于它时，列尚未定义。我使用 knockoutJS 的方法是将我的数据绑定代码移动到一个 knockout 模板中，并使用 afterRender 事件将 DataTable 应用到 table。

这是模板 afterRender 事件的 link 到 knockoutJS docs。

这是我的数据绑定的样子：

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

还有一招。在 setupDataTable 函数中，table 仍然没有完全设置，（我试图获取 fixedHeaders 并且宽度还没有设置）。因此，我以 0 毫秒的延迟调用 setTimeout，以便在第一个空闲周期将代码设为运行。

这是我的设置数据表：

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

希望这可以帮助其他人寻找 knockoutJS 解决方案并运行解决我运行遇到的同样问题。

Answer 4

这个错误出现在我身上，我相信是因为我的 "mData" 和 "sTitle" 是未定义的。

Answer 5

我在将数据 table 绑定到 .Net GridView 时遇到了类似的问题，如果网格视图没有任何数据并且没有定义 header 值，那么它会抛出：

Uncaught TypeError: Cannot read property 'aDataSort' of undefined

下面是相同的代码。

$("#GridView1").prepend($("<thead</thead>").append($("#GridView1").find("tr:first"))).dataTable();
$("#GridView1").dataTable();

我猜你也面临着同样的问题，因为你也在动态地获取 table header 名称，如果它的结果为 null 或空，那么你会收到上述错误.因此，要么在将列绑定到数据 table 时尝试提供列名，要么确保您的 PHP 代码总是 returns table header 的一些数据。

Uncaught TypeError: Cannot read property 'aDataSort' of undefined

Uncaught TypeError: Cannot read property 'aDataSort' of undefined

javascript

jquery

jquery-datatables