Cara memperbarui tabel datatables secara manual dengan data JSON baru

Saya menggunakan plugin jQuery datatables dan memuat data saya yang telah saya muat di DOM di bagian bawah halaman dan memulai plugin dengan cara ini:

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

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

Sekarang. setelah melakukan beberapa tindakan saya ingin mendapatkan data baru menggunakan ajax (tetapi bukan opsi ajax membangun datatables - jangan salah paham!) dan memperbarui tabel dengan data ini. Bagaimana saya bisa melakukannya menggunakan API tabel data? Dokumentasi sangat membingungkan dan saya tidak dapat menemukan solusinya. Bantuan apa pun akan sangat dihargai. Terima kasih.

SOLUSI: (Perhatikan: solusi ini untuk datatables versi 1.10.4 (saat ini) bukan versi legacy).

KLARIFIKASI Sesuai dengan dokumentasi API (1.10.15), API dapat diakses dengan tiga cara:

1. Definisi modern DataTables (huruf besar unta):

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

2. Definisi warisan DataTables (huruf kecil unta):

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

3. Menggunakan newsintaks.

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

Kemudian muat data seperti ini:

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

Referensi API:

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

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

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

Kamu bisa memakai:

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

Jsfiddle

Memperbarui. Dan ya, dokumentasi saat ini tidak begitu bagus tetapi jika Anda baik-baik saja menggunakan versi yang lebih lama, Anda dapat merujuk dokumentasi lama .

Anda perlu menghancurkan instance tabel data lama dan kemudian menginisialisasi ulang tabel data

Pertama Periksa apakah ada contoh tabel data dengan menggunakan $ .fn.dataTable.isDataTable

jika ada maka hancurkan dan buat instance baru seperti ini

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

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

Berikut adalah solusi untuk data lama 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);

Dalam kasus saya, saya tidak menggunakan api ajax bawaan untuk memberi makan Json ke tabel (ini karena beberapa pemformatan yang agak sulit untuk diterapkan di dalam render callback yang dapat diakses data itu).

Solusi saya adalah membuat variabel di ruang lingkup luar fungsi onload dan fungsi yang menangani penyegaran data (var table = null , misalnya).

Kemudian saya membuat contoh tabel saya dalam metode on load

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

dan terakhir, dalam fungsi yang menangani penyegaran, saya memanggil metode clear () dan destruksi (), mengambil data ke dalam tabel html, dan membuat instantiate datatable, seperti:

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

Saya harap seseorang menemukan ini berguna!