elle yeni JSON veri

Question

Ben eklentisi jQuery datatables kullanıyorum ile datatables tabloyu güncellemek ve sayfanın alt kısmında DOM yüklenen ve bu şekilde eklentiyi başlatır var benim verilerini yüklemek için:

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

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

Şimdi. ajax kullanarak yeni veriler elde etmek istiyorum (ama ajax seçeneği veri kümeleri oluşturma - beni yanlış anlama!) ve bu verilerle tabloyu güncellemek istiyorum. Bunu datatables API kullanarak nasıl yapabilirim? Dokümantasyon çok kafa karıştırıcı ve ben bir çözüm bulamıyorum. Herhangi bir yardım çok takdir edilecektir. Teşekkürler.

Answer 1

ÇÖZÜM: (Uyarı: Bu çözüm şu anda datatables sürümü 1.10.4() değil eski sürümü için ise): API documentation (1.10.15) Başına

AÇIKLANMASI API olabilir erişilen üç yolu

1. DataTable modern tanımı (üst deve durum):

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

2. DataTable mirası tanımı (alt deve durum):

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

3. new sözdizimi kullanılarak.

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

Bundan sonra bu şekilde gibi veri yüklemek:

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

API referansları:

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

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

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

Answer 2

Sen kullanabilirsiniz:

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

Jsfiddle

Güncelleme. Ve evet mevcut belgeler çok iyi değil, ancak eski sürümleri kullanmamanız durumunda legacy documentation'a bakabilirsiniz.

Answer 3

Benim durumumda, Json'u tabloya beslemek için yerleşik ajax api'yi kullanmıyorum (bunun nedeni, veri tabanının render geri çağırma içinde uygulanması oldukça zor olan bazı biçimlendirmelerden kaynaklanmaktadır).

Benim çözümüm, yük öğelerinin dış kapsamındaki ve veri yenilemesini işleyen işlevi (örneğin, var table = null) oluşturmaktı.

Sonra

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

ve son olarak yenileme kolları işlevinde i (net çağırmak) ve() metodu yok html içine veri almaya yük yöntemine de masamı örneğini tabloyu yeniden oluşturun ve şu şekilde yeniden oluşturun:

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

Umarım birisi bu işe yarar! İşte

Answer 4

Datatable mirası için çözüm

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