Veri tabloları tablosu yeni JSON verileriyle manuel olarak nasıl güncellenir?

JQuery datatables eklentisi kullanıyorum ve sayfanın altındaki DOM'a yüklediğim verilerimi yüklüyorum ve eklentiyi şu şekilde başlatıyorum:

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

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

Şimdi. Bazı eylemleri gerçekleştirdikten sonra ajax kullanarak yeni veriler almak istiyorum (ancak ajax seçeneği değil, veri tablolarında inşa et - beni yanlış anlama!) ve tabloyu bu verilerle güncellemek istiyorum. Datatables API kullanarak bunu nasıl yapabilirim? Dokümantasyon çok kafa karıştırıcı ve bir çözüm bulamıyorum. Herhangi bir yardım çok takdir edilecektir. Teşekkürler.

ÇÖZÜM: (Dikkat: Bu çözüm, veri tabloları sürüm 1.10.4 içindir (şu anda) eski sürüm değil).

AÇIKLAMA Başına API belgelerine (1.10.15), API üç şekilde ulaşılabilir:

1. Veri Tablolarının modern tanımı (üst deve durumu):

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

2. Veri Tablolarının eski tanımı (küçük deve durumu):

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

3. newSözdizimini kullanarak .

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

Ardından verileri şu şekilde yükleyin:

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

draw(false)Veri güncellemesinden sonra aynı sayfada kalmak için kullanın .

API referansları:

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

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

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

Kullanabilirsiniz:

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

Jsfiddle

Güncelleme. Ve evet, mevcut belgeler çok iyi değil, ancak eski sürümleri kullanmakta sorun yoksa eski belgelere başvurabilirsiniz .

Eski veri tablosu örneğini yok etmeniz ve ardından veri tablosunu yeniden başlatmanız gerekir

Önce $ .fn.dataTable.isDataTable kullanarak veri tablosu örneğinin var olup olmadığını kontrol edin

eğer varsa onu yok et ve bunun gibi yeni bir örnek oluştur

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

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

Eski veriye sahip 1.9.4 çözümü burada.

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

Benim durumumda, Json'u tabloya beslemek için yerleşik ajax api'yi kullanmıyorum (bunun nedeni, datatable'ın render geri aramasında uygulanması oldukça zor olan bazı biçimlendirmelerdir).

Benim çözümüm, değişkeni onload işlevlerinin dış kapsamında ve veri yenilemeyi işleyen işlevde oluşturmaktı (var table = null örneğin) oluşturmaktı.

Sonra on load yönteminde tablomu somutlaştırıyorum

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

ve son olarak, yenilemeyi işleyen işlevde clear () ve destroy () yöntemini çağırıyorum, verileri html tablosuna getiriyorum ve datatable'ı şu şekilde yeniden başlatıyorum:

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

Umarım birisi bunu yararlı bulur!