नए JSON डेटा के साथ डेटाटैबल्स तालिका को मैन्युअल रूप से कैसे अपडेट करें

Question 1

मैं प्लगइन jQuery डेटाटैबल्स का उपयोग कर रहा हूं और अपने डेटा को लोड करता हूं जो मैंने पृष्ठ के निचले भाग में डोम में लोड किया है और इस तरह से प्लगइन शुरू करता है:

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

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

अभी। कुछ कार्रवाई करने के बाद मैं ajax का उपयोग करके नया डेटा प्राप्त करना चाहता हूं (लेकिन डेटाटैबल्स में ajax विकल्प का निर्माण नहीं - मुझे गलत मिलेगा!) और इन डेटा के साथ तालिका को अपडेट करें। मैं डेटाटैब एपीआई का उपयोग कैसे कर सकता हूं? प्रलेखन बहुत भ्रामक है और मुझे कोई समाधान नहीं मिल रहा है। किसी भी मदद की बहुत सराहना की जाएगी। धन्यवाद।

Question 2

समाधान: (सूचना: यह समाधान datatables संस्करण 1.10.4 के लिए है (फिलहाल) विरासत संस्करण नहीं)।

स्पष्टीकरण प्रति API दस्तावेज़ (1.10.15), एपीआई तीन तरीके पहुँचा जा सकता है:

डेटाटेबल्स की आधुनिक परिभाषा (ऊपरी ऊंट मामले):

var datatable = $( selector ).DataTable();
DataTables (कम ऊंट मामले) की विरासत परिभाषा:

var datatable = $( selector ).dataTable().api();
newवाक्य रचना का उपयोग करना ।

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

फिर डेटा को इस तरह लोड करें:

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

draw(false)डेटा अपडेट के बाद उसी पेज पर बने रहने के लिए उपयोग करें।

एपीआई संदर्भ:

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

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

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

Question 3

आप उपयोग कर सकते हैं:

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

Jsfiddle

अपडेट करें। और हाँ वर्तमान प्रलेखन इतना अच्छा नहीं है लेकिन यदि आप पुराने संस्करणों का उपयोग करके ठीक हैं तो आप विरासत प्रलेखन का उल्लेख कर सकते हैं ।

Question 4

आपको पुराने डेटा-टेबल इंस्टेंस को नष्ट करने और फिर डेटा-टेबल को फिर से इनिशियलाइज़ करने की आवश्यकता है

अगर $ .fn.dataTable.isDataTable का उपयोग करके डेटा तालिका उदाहरण मौजूद है, तो पहले जांचें

यदि मौजूद है तो इसे नष्ट कर दें और फिर इस तरह के नए उदाहरण बनाएं

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

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

Question 5

यहाँ विरासत के लिए समाधान है datatable 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);

Question 6

मेरे मामले में, मैं Jjon को टेबल पर खिलाने के लिए ajax api में निर्मित का उपयोग नहीं कर रहा हूं (यह कुछ स्वरूपण के कारण है जो डेटाटेबल के रेंडरबैक कॉलबैक के अंदर लागू करना मुश्किल था)।

मेरा समाधान ऑनलोड कार्यों के बाहरी क्षेत्र में चर बनाने और डेटा ताज़ा करने वाले फ़ंक्शन ( var table = nullउदाहरण के लिए) को संभालना था ।

फिर मैं लोड विधि पर अपनी तालिका को तुरंत लिखता हूं

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

और अंत में, उस फ़ंक्शन में, जो रिफ्रेश को हैंडल करता है, मैं स्पष्ट () और नष्ट () विधि को लागू करता हूं, डेटा को html टेबल में लाता हूं, और डेटाटेबल को फिर से इंस्टेंट करता हूं, जैसे:

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

मुझे आशा है कि किसी को यह उपयोगी लगता है!