Cách cập nhật thủ công bảng dữ liệu với dữ liệu JSON mới

Tôi đang sử dụng plugin jQuery datatables và tải dữ liệu của tôi mà tôi đã tải trong DOM ở cuối trang và khởi chạy plugin theo cách này:

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

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

Hiện nay. sau khi thực hiện một số hành động, tôi muốn nhận dữ liệu mới bằng cách sử dụng ajax (nhưng không phải là tùy chọn ajax xây dựng trong các dữ liệu - đừng hiểu nhầm!) và cập nhật bảng với những dữ liệu này. Làm cách nào tôi có thể làm điều đó bằng cách sử dụng API dữ liệu? Tài liệu rất khó hiểu và tôi không thể tìm ra giải pháp. Bất kì sự trợ giúp nào cũng được đánh giá cao. Cảm ơn.

GIẢI PHÁP: (Lưu ý: giải pháp này dành cho dữ liệu phiên bản 1.10.4 (hiện tại) không phải phiên bản kế thừa).

Làm rõ Theo các tài liệu API (1.10.15), API có thể được truy cập ba cách:

1. Định nghĩa hiện đại của DataTables (chữ hoa lạc đà trên):

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

2. Định nghĩa kế thừa của DataTables (chữ hoa camel thấp hơn):

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

3. Sử dụng newcú pháp.

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

Sau đó tải dữ liệu như sau:

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

Tham chiếu API:

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

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

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

Bạn có thể dùng:

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

Jsfiddle

Cập nhật. Và có tài liệu hiện tại không quá tốt nhưng nếu bạn thấy ổn khi sử dụng các phiên bản cũ hơn, bạn có thể tham khảo tài liệu cũ .

Bạn cần phải hủy phiên bản bảng dữ liệu cũ và sau đó khởi tạo lại bảng dữ liệu

Đầu tiên Kiểm tra xem cá thể bảng dữ liệu có tồn tại hay không bằng cách sử dụng $ .fn.dataTable.isDataTable

nếu tồn tại thì hãy phá hủy nó và sau đó tạo phiên bản mới như thế này

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

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

Đây là giải pháp cho dữ liệu kế thừa 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);

Trong trường hợp của tôi, tôi không sử dụng api ajax tích hợp sẵn để cung cấp Json vào bảng (điều này là do một số định dạng khá khó thực hiện bên trong lệnh gọi lại kết xuất của dữ liệu).

Giải pháp của tôi là tạo biến trong phạm vi bên ngoài của các hàm onload và hàm xử lý việc làm mới dữ liệu ( var table = nullví dụ:).

Sau đó, tôi khởi tạo bảng của mình trong phương thức tải

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

và cuối cùng, trong hàm xử lý làm mới, tôi gọi phương thức clear () và Dest (), tìm nạp dữ liệu vào bảng html và khởi tạo lại dữ liệu, chẳng hạn như:

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

Tôi hi vọng ai đó thấy nó hữu ích!