Cara memperbarui tabel datatables secara manual dengan data JSON baru


98

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.


Bagaimana dengan menghapus tablebody yang ada dan membuatnya baru?
Reporter

Jawaban:


177

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 ()


4
Ini terlalu sulit untuk ditemukan, terima kasih banyak! Menggunakan ini untuk mempertahankan data yang ada di antara bolak-balik server.
Doug

Bagaimana dengan datatables versi 1.9.4 Saya menghadapi masalah yang sama
Hardik Masalawala

4
Saya hanya ingin menambahkan bahwa Anda juga dapat merantai metode (yaitu datatable.clear().rows.add(newDataArray).draw()). Untuk komentar ini, saya menggunakan versi 1.10.18
Sal_Vader_808

bagaimana saya bisa menambahkan satu kolom dengan kontrol tombol
ajinkya

30

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 .


Ya, Anda benar, tapi saya menggunakan versi terbaru dari tabel data. Bagaimanapun, saya menemukan solusi dan memperbarui pertanyaan saya. Terima kasih atas minat Anda :)
Indy

1
@CookieMan, hapus hasil edit Anda dan posting sebagai jawaban. Setelah itu, tandai sebagai diterima.
Reporter

solusi ini tidak memperbarui bagian pagination
Alok Deshwal

8

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
    });

5

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);

Ini berfungsi untuk versi terbaru (harap, pertimbangkan tanggal komentar). Terima kasih Vikas!
Telmo

Ini berhasil untuk saya. Tapi saya tidak mengerti mengapa saya bisa menggunakan semua contoh ini: var datatable = $ (selector) .DataTable (); var datatable = $ (selector) .dataTable (). api (); var datatable = new $ .fn.dataTable.Api (selector); Tetapi saat menambahkan .row (). Add () tidak berfungsi.
Fernando Palma

4

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!


2
Menghancurkan seluruh tabel di setiap perjalanan pulang pergi agak mahal dan negara bagian juga hilang. Anda harus mempertimbangkan jawaban yang diterima di mana status tabel disimpan.
nhaberl
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.