JQuery डेटाटेबल टेबल ताज़ा करें

इसके बारे में बहुत सारे प्रश्न थे लेकिन मुझे कभी ऐसा नहीं मिला जो मेरे लिए काम करता था। मेरे पास एक सादा और सरल HTML तालिका है जिसके शरीर को AJAX कॉल से पंक्तियों से भरा जा रहा है। फिर मैं डेटाटेबल प्लगइन के साथ तालिका को अपडेट करना चाहता हूं लेकिन यह काम नहीं करता है। मेरे पास एक HTML तालिका है जो इस तरह दिखती है:

<table id="myTable">
  <thead>
     <tr>
          <th>1</th>
          <th>2</th>
          <th>3</th>
          <th>4</th>
          <th>5</th>
     </tr>
  </thead>
  <tbody>
  </tbody>
</table>

मेरे jQuery pageload में

$(document).ready(function(){
        var oTable = $('#myTable').dataTable({
            "aoColumns": [
              { "bSortable": false },
              null, null, null, null
            ]
        });
});

और अंततः ड्रॉपडाउन सूची परिवर्तन पर मेरा

$("#dropdownlist").on("change", function() {
        $("tbody").empty();
            $.ajax({
                type: "POST",
                url: "@Url.Action("ActionHere", "Controller")",
                dataType: "json",
                success: function (data) {
                    $.each(data, function (key, item) {
                        $("tbody").append("<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>");
                    });
                }
            })
        var oTable = $('#myTable').dataTable();//Nothing happens
        var oTable = $('#myTable').dataTable({//Cannot initialize it again error
                "aoColumns": [
                  { "bSortable": false },
                  null, null, null, null
                ]
            });
        });

संलग्न करना और इसे कम करने के लिए संशोधित किया गया है, इसलिए इस पर बहुत अधिक ध्यान केंद्रित न करें।

असल में सवाल यह है कि तालिका को कैसे अपडेट किया जाए, मैं अपना AJAX कर सकता हूं और तालिका में नया डेटा जोड़ सकता हूं, लेकिन डेटाटेबल प्लगइन इसके साथ अपडेट नहीं होता है। मैंने अन्य चीजों की तरह कोशिश की है

.fnDraw (गलत);

लेकिन यह कुछ भी नहीं करता है जबकि मुझे एक JSON त्रुटि मिलती है

fnReloadAjax()

टेबल को रीफ्रेश करने के तरीके पर कोई सुराग?

12

5 उत्तर

इसे इस्तेमाल करे

शुरुआत में आपने तालिका शुरू की थी ताकि पहले उस तालिका को साफ़ कर सकें

$('#myTable').dataTable().fnDestroy();

फिर AJAX सफलता के बाद फिर से शुरू करें

$('#myTable').dataTable();

इस कदर

$("#dropdownlist").on("change", function() {
        $("tbody").empty();
            $.ajax({
                type: "POST",
                url: "@Url.Action("ActionHere", "Controller")",
                dataType: "json",
                success: function (data) {
                    $.each(data, function (key, item) {
                        $("tbody").append("<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>");
                    });
                }
            })
       $('#myTable').dataTable().fnDestroy();
       $('#myTable').dataTable({//Cannot initialize it again error
                "aoColumns": [
                  { "bSortable": false },
                  null, null, null, null
                ]
            });
        });

डेमो

24
जोड़ा
यह बहुत अच्छी तरह से काम करता है। धन्यवाद
जोड़ा लेखक Praveen Srinivasan, स्रोत
थोड़ी देर के बाद इसे काम करने के लिए मिला, मेरे AJAX इसके लिए बहुत भारी था और ऐसा लगता है कि बहुत सारी ब्राउज़र अक्षमताएं हैं लेकिन यह अभी ठीक काम करती है।
जोड़ा लेखक HenrikP, स्रोत
वहां सेटिंग का यह टुकड़ा जोड़ें: "बीडीफररेंडर": सच
जोड़ा लेखक user2930100, स्रोत

मुझे पता है कि यह एक पुरानी पोस्ट है, लेकिन मैंने अभी समस्या के बारे में जांच की है और मुझे डेटाटेबल मैन पेजों में इसे हल करने का सबसे आसान तरीका मिल गया है: https://datatables.net/reference/api/ajax.reload%28%29 आपको table.ajax.reload() को कॉल करने की आवश्यकता है;

2
जोड़ा
धन्यवाद, इससे मदद मिली। अपने डेटाटेबल में "नष्ट करें: सत्य" और जब आप पुनः लोड करना चाहते हैं, तो table.ajax.reload() का उपयोग करें;
जोड़ा लेखक hYk, स्रोत

संस्करण 1.10.0 से आगे आप ajax.reload() api का उपयोग कर सकते हैं।

var table = $('#myTable').DataTable();
table.ajax.reload();

$ ('# myTable') का उपयोग करने के लिए ध्यान रखें। डेटाटेबल() और नहीं    $ ( '# mytable')। DataTable()

1
जोड़ा
var table =  $('#product_table').DataTable({
    "bProcessing": true,
    "serverSide": true,
    responsive: true,
    "ajax": {
        url: get_base_url + "product_table",//json datasource
        type: "post",//type of method  ,GET/POST/DELETE
        error: function() {
            $("#employee_grid_processing").css("display", "none");
        }
    }
});

//call this funtion 
$(document).on('click', '#view_product', function() {
  table.ajax.reload();
});
1
जोड़ा

I had done something that relates to this... Below is a sample JavaScript with what you need. There is a demo on this here: http://codersfolder.com/2016/07/crud-with-php-mysqli-bootstrap-datatables-jquery-plugin/

//global the manage member table 
var manageMemberTable;

function updateMember(id = null) {
    if(id) {
       //click on update button
        $("#updatebutton").unbind('click').bind('click', function() {
            $.ajax({
                url: 'webdesign_action/update.php',
                type: 'post',
                data: {member_id : id},
                dataType: 'json',
                success:function(response) {
                    if(response.success == true) {                      
                        $(".removeMessages").html('<div class="alert alert-success alert-dismissible" role="alert">'+
                              '<button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>'+
                              '  '+response.messages+
                            '</div>');

                       //refresh the table

                        manageMemberTable.ajax.reload();

                       //close the modal
                        $("#updateModal").modal('hide');

                    } else {
                        $(".removeMessages").html('<div class="alert alert-warning alert-dismissible" role="alert">'+
                              '<button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>'+
                              '  '+response.messages+
                            '</div>');

                       //refresh the table                        
                        manageMemberTable.ajax.reload();

                       //close the modal
                        $("#updateModal").modal('hide');
                    }
                }
            });
        });//click remove btn
    } else {
        alert('Error: Refresh the page again');
    }
}
0
जोड़ा