jQuery数据表：无法读取未定义的属性“ aDataSort”

我创造了这个小提琴和它运作良好，按我的要求：小提琴

但是，当我在应用程序中使用相同的内容时，在浏览器控制台中出现错误，提示无法读取未定义的属性“ aDataSort”

在我的应用程序中，javascript读取如下内容：我已经检查了控制器的输出...它运行良好，并且也打印在控制台上。

$(document).ready(function() {

    $.getJSON("three.htm", function(data) {
             // console.log("loadDataTable >>  "+JSON.stringify(data));
             })
             .fail(function( jqxhr, textStatus, error ) {
             var err = textStatus + ', ' + error;
             alert(err);
             console.log( "Request Failed: " + err);
             })
             .success(function(data){
                 loadDataTable(data);
             });

    function loadDataTable(data){
         $("#recentSubscribers").dataTable().fnDestroy();    
         var oTable = $('#recentSubscribers').dataTable({
             "aaData" : JSON.parse(data.subscribers),
             "processing": true,
            "bPaginate": false,
            "bFilter": false,
            "bSort": false,
            "bInfo": false,
            "aoColumnDefs": [{
            "sTitle": "Subscriber ID",
            "aTargets": [0]
        }, {
            "sTitle": "Install Location",
            "aTargets": [1]
        }, {
            "sTitle": "Subscriber Name",
            "aTargets": [2]
        }, {
            "aTargets": [0], 
            "mRender": function (data, type, full) {
                return '<a style="text-decoration:none;" href="#" class="abc">' + data + '</a>';
            }
        }],
            "aoColumns": [{
            "mData": "code"
        }, {
            "mData": "acctNum"
        }, {
            "mData": "name"
        }]
            });

    }       

})

重要的是，THEAD在表中不能为空。由于dataTable要求您指定期望数据的列数。根据您的数据

<table id="datatable">
    <thead>
        <tr>
            <th>Subscriber ID</th>
            <th>Install Location</th>
            <th>Subscriber Name</th>
            <th>some data</th>
        </tr>
    </thead>
</table>

也有此问题，此数组超出范围：

order: [1, 'asc'],

对我而言，该错误在于DataTables本身。DataTables 1.10.9中用于排序的代码不会检查范围；因此，如果您使用类似

order: [[1, 'asc']]

如果表为空，则没有行idx 1->此异常确保。这是因为表的数据是异步获取的。最初，在页面加载时，dataTable被初始化为不包含数据。应在获取结果数据后立即对其进行更新。

我的解决方案：

// add within function _fnStringToCss( s ) in datatables.js
// directly after this line
// srcCol = nestedSort[i][0];

if(srcCol >= aoColumns.length) {
    continue;
}

// this line follows:
// aDataSort = aoColumns[ srcCol ].aDataSort;

我遇到了同样的问题，以下更改解决了我的问题。

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

该aoColumns数组描述每列的宽度及其sortable属性。

当您按不存在的列号进行订购时，也会出现另一种提及此错误的信息。

就我而言

$(`#my_table`).empty();

应该在哪里

$(`#my_table tbody`).empty();

注意：在我的情况下，我必须清空表，因为在插入新数据之前，我有想要删除的数据。

只是想过分享它在“可能”的地方会在将来对某人有所帮助！

我遇到了这个问题，这是因为另一个脚本正在删除所有表并重新创建它们，但是并没有重新创建我的表。我花了很长时间在这个问题上，直到我发现我的桌子在页面上什至不可见。在初始化DataTables之前可以看到表吗？

本质上，另一个脚本正在执行：

let tables = $("table");
for (let i = 0; i < tables.length; i++) {
  const table = tables[i];
  if ($.fn.DataTable.isDataTable(table)) {
    $(table).DataTable().destroy(remove);
    $(table).empty();
  }
}

它应该一直在做：

let tables = $("table.some-class-only");
... the rest ...

由于解析，您需要将单引号切换[']为双引号["]

如果您在表上使用data-order属性，则按如下方式使用它data-order='[[1, "asc"]]'

就我而言，我通过在order配置数据表的脚本中应用属性时建立有效的列号来解决该问题。

var table = $('#mytable').DataTable({
     .
     .
     .
     order: [[ 1, "desc" ]],