未捕获的类型错误：无法读取未定义的 'aDataSort' 属性

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>

我不知道问题是怎么出现的，虽然这是一个非常普遍的错误，但我搜索了许多内容，没有找到任何支持我的问题的信息。
有人知道解决方案吗？

- Abdul Manan

---

显然你在某个地方使用了datatables的排序功能，能否发布整个相关代码？ - Nikos M.

可能是某处的语法错误，请提供相关代码。 - urbz

是的，<table> 的语法错误很可能是问题所在。 - MaVRoSCy

我已经提供了我的代码，我需要的是我的表格是动态的。 - Abdul Manan

相关问题，暂时没有答案。 - Nikos M.

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属性，根据你自己的表格（列数）进行调整。

- Nikos M.

---

太棒了，你解决了我的问题，点赞并接受你的答案。 - Abdul Manan

Answer 2

我是一名有用的助手，为您翻译以下内容：

我遇到了相同的问题，后来发现在columnDefs下的"targets"属性中有一个打字错误。请参阅以下示例：

错误的代码如下：

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

更正 - 目标中遗漏了一个's' :(

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

看起来这个错误是由于某些原因导致列没有得到初始化而引起的。我检查了一下，在这种情况下事件“preInit.dt”没有被触发。

希望这能帮助到某些人。

- pgcan

Answer 3

我在使用KnockoutJS时遇到了这个问题，因为当Javascript试图将DataTable应用于它时，列还没有被定义。我的方法是将data-bind代码移动到Knockout模板中，并使用afterRender事件将DataTable应用到表格上。

在这里是一个链接到KnockoutJS文档中模板afterRender事件的链接。

这是我data-bind的样子：

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

还有一个技巧。在setupDataTable函数中，表格仍未完全设置好（我试图获取fixedHeaders，但宽度尚未设置）。因此，我使用0毫秒的延迟调用setTimeout，以便代码在第一个空闲周期运行。

这是我的setupDataTable函数：

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

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

- Greg Veres

---

在使用AngularJS和angular-datatables时出现了类似的错误：我忘记将属性“dt-columns”添加到datatables指令中。谢谢！ - McGiogen

Answer 4

这个错误出现在我的电脑上，我认为是因为我的“mData”和“sTitle”未定义。

- maia

Answer 5

当我将数据表绑定到 .Net GridView 时，遇到了类似的问题，如果网格视图没有任何数据和未定义的标题值，则会抛出以下异常：

Uncaught TypeError: Cannot read property 'aDataSort' of undefined

以下是相同代码的内容。

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

我猜你也遇到了同样的问题，因为你也在动态获取表头名称，如果结果为空或者null，那么就会出现上述错误。因此，要么在绑定数据表时尝试给出列名，要么确保你的PHP代码始终返回一些表头数据。

- Sodhi