JQuery Datatables:无法读取未定义的属性'aDataSort'

Question

我创造了这个小提琴,它按照我的要求运作良好:小提琴

但是,当我在我的应用程序中使用相同的内容时,我在浏览器控制台中出现错误,指出无法读取未定义的属性"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"
        }]
            });

    }       

})

Answer 1

重要的是你的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>

Answer 2

也有这个问题,这个数组超出了范围:

order: [1, 'asc'],

Answer 3

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

$(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属性。

当您按不存在的列号进行排序时，还会出现要提及此错误的另一件事。

Answer 4

对我而言，该错误在于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;

Answer 5

就我而言，我有

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

它应该在哪里

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

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

只是想分享它“可能”在未来帮助别人！