วิธีอัปเดตตารางข้อมูลด้วยตนเองด้วยข้อมูล JSON ใหม่

ฉันใช้ปลั๊กอินjQuery datatablesและโหลดข้อมูลของฉันซึ่งฉันได้โหลดใน DOM ที่ด้านล่างของหน้าและเริ่มต้นปลั๊กอินด้วยวิธีนี้:

var myData = [
    {
        "id": 1,
        "first_name": "John",
        "last_name": "Doe"
    }
];

$('#table').dataTable({
    data: myData
        columns: [
        { data: 'id' },
        { data: 'first_name' },
        { data: 'last_name' }
    ]
});

ตอนนี้. หลังจากดำเนินการบางอย่างแล้วฉันต้องการรับข้อมูลใหม่โดยใช้ ajax (แต่ไม่ใช่ตัวเลือก ajax ที่สร้างในดาต้า - อย่าเข้าใจฉันผิด!) และอัปเดตตารางด้วยข้อมูลเหล่านี้ ฉันจะทำได้อย่างไรโดยใช้ Datatables API เอกสารมีความสับสนมากและฉันไม่สามารถหาวิธีแก้ไขได้ ความช่วยเหลือใด ๆ จะได้รับการชื่นชมเป็นอย่างมาก ขอบคุณ.

วิธีแก้ปัญหา: (หมายเหตุ: โซลูชันนี้มีไว้สำหรับรุ่นข้อมูล 1.10.4 (ในขณะนี้) ไม่ใช่เวอร์ชันดั้งเดิม)

ชี้แจงตามที่ระบุเอกสาร API (1.10.15) API ที่สามารถเข้าถึงได้สามวิธี:

1. คำจำกัดความที่ทันสมัยของ DataTables (กรณีอูฐด้านบน):

   var datatable = $( selector ).DataTable();

2. คำจำกัดความดั้งเดิมของ DataTables (ตัวพิมพ์เล็กอูฐ):

   var datatable = $( selector ).dataTable().api();

3. การใช้newไวยากรณ์

   var datatable = new $.fn.dataTable.Api( selector );

จากนั้นโหลดข้อมูลดังนี้:

$.get('myUrl', function(newDataArray) {
    datatable.clear();
    datatable.rows.add(newDataArray);
    datatable.draw();
});

ใช้draw(false)เพื่ออยู่ในหน้าเดียวกันหลังจากการอัปเดตข้อมูล

การอ้างอิง API:

https://datatables.net/reference/api/clear ()

https://datatables.net/reference/api/rows.add ()

https://datatables.net/reference/api/draw ()

คุณสามารถใช้ได้:

$('#table').dataTable().fnClearTable();
$('#table').dataTable().fnAddData(myData2);

Jsfiddle

อัปเดต. และใช่เอกสารปัจจุบันไม่ดีนัก แต่ถ้าคุณโอเคโดยใช้เวอร์ชันเก่าคุณสามารถอ้างอิงเอกสารดั้งเดิมได้

คุณต้องทำลายอินสแตนซ์ตารางข้อมูลเก่าแล้วเริ่มต้นตารางข้อมูลใหม่

ขั้นแรกตรวจสอบว่ามีอินสแตนซ์ตารางข้อมูลหรือไม่โดยใช้$ .fn.dataTable.isDataTable

หากมีอยู่ให้ทำลายมันแล้วสร้างอินสแตนซ์ใหม่เช่นนี้

    if ($.fn.dataTable.isDataTable('#dataTableExample')) {
        $('#dataTableExample').DataTable().destroy();
    }

    $('#dataTableExample').DataTable({
        responsive: true,
        destroy: true
    });

นี่คือวิธีแก้ปัญหาสำหรับ 1.9.4 แบบเดิมที่ดาต้าเบส

    var myData = [
      {
        "id": 1,
        "first_name": "Andy",
        "last_name": "Anderson"
      }
   ];
    var myData2 = [
      {
        "id": 2,
        "first_name": "Bob",
        "last_name": "Benson"
      }
    ];

  $('#table').dataTable({
  //  data: myData,
       aoColumns: [
         { mData: 'id' },
         { mData: 'first_name' },
         { mData: 'last_name' }
      ]
  });

 $('#table').dataTable().fnClearTable();
 $('#table').dataTable().fnAddData(myData2);

ในกรณีของฉันฉันไม่ได้ใช้ ajax api ในตัวเพื่อป้อน Json ไปยังตาราง (นี่เป็นเพราะการจัดรูปแบบบางอย่างที่ค่อนข้างยากที่จะนำไปใช้ภายในการเรียกกลับการแสดงผลของข้อมูลที่สามารถใช้งานได้)

วิธีแก้ปัญหาของฉันคือการสร้างตัวแปรในขอบเขตภายนอกของฟังก์ชัน onload และฟังก์ชันที่จัดการการรีเฟรชข้อมูล ( var table = nullตัวอย่างเช่น)

จากนั้นฉันสร้างอินสแตนซ์ตารางของฉันด้วยวิธีการโหลด

$(function () {
            //.... some code here
            table = $("#detailReportTable").DataTable();
            .... more code here
        });

และสุดท้ายในฟังก์ชั่นที่จัดการการรีเฟรชฉันเรียกใช้เมธอด clear () และ destroy () ดึงข้อมูลลงในตาราง html และสร้างอินสแตนซ์ข้อมูลใหม่อีกครั้งเช่น:

function getOrderDetail() {
            table.clear();
            table.destroy();
            ...
            $.ajax({
             //.....api call here
            });
            ....
            table = $("#detailReportTable").DataTable();
   }

ฉันหวังว่าใครบางคนจะพบว่าสิ่งนี้มีประโยชน์!