web-dev-qa-db-ja.com

JQuery Datatables：未定義のプロパティ 'aDataSort'を読み取ることができません

私はこのフィドルを作成しましたが、私の要件に従ってうまく機能しています： Fiddle

ただし、アプリケーションで同じものを使用すると、ブラウザコンソールにというエラーが表示されますundefinedのプロパティ '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"
        }]
            });

    }       

})
javascriptjqueryjquery-datatables
66
swateek

Tableで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>
100
Gkrish

また、この問題がありました、この配列は範囲外でした：

order: [1, 'asc'],
43
hogarth45

私にとって、バグは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;
5
Oliver Zendel

私もこの問題を抱えており、以下の変更が私の問題を解決しました。

$(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プロパティを記述します。

2
Abdul Manan

私の場合、私は持っていた

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

あるべき場所

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

注：私の場合、新しいデータを挿入する前に必要なデータがあったため、テーブルを空にする必要がありました。

将来誰かを助けるかもしれない場所を共有することを考えてみてください！

1
JumpingElephant