JQuery Datatables: ไม่สามารถอ่านคุณสมบัติ 'aDataSort' ของ undefined

ฉันสร้างซอนี้ขึ้นมาและใช้งานได้ดีตามความต้องการของฉัน: ซอ

อย่างไรก็ตามเมื่อฉันใช้สิ่งเดียวกันในแอปพลิเคชันของฉันฉันได้รับข้อผิดพลาดในคอนโซลของเบราว์เซอร์ว่าไม่สามารถอ่านคุณสมบัติ 'aDataSort' ของไม่ได้กำหนด

ในแอปพลิเคชันของฉันจาวาสคริปต์อ่านบางสิ่งดังต่อไปนี้: ฉันได้ตรวจสอบเอาต์พุตคอนโทรลเลอร์แล้ว ... ทำงานได้ดีและพิมพ์บนคอนโซลด้วย

$(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 attribute บนตารางให้ใช้แบบนี้data-order='[[1, "asc"]]'

ในกรณีของฉันฉันแก้ไขปัญหาโดยการสร้างหมายเลขคอลัมน์ที่ถูกต้องเมื่อใช้orderคุณสมบัติภายในสคริปต์ที่คุณกำหนดค่าตารางข้อมูล

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