JQuery डेटा को पुनः लोड / ताज़ा कैसे करें?

89

मैं कार्यक्षमता को लागू करने की कोशिश कर रहा हूं जिससे स्क्रीन पर एक बटन पर क्लिक करने से मेरा jQuery का डेटाटेबल रिफ्रेश हो जाएगा (क्योंकि डेटाटेबल बनने के बाद सर्वर-साइड डेटा स्रोत बदल गया होगा)।

यहाँ मेरे पास क्या है:

$(document).ready(function() {
    $("#my-button").click(function() {
        $("#my-datatable").dataTable().fnReloadAjax();
    });
});

लेकिन जब मैं इसे चलाता हूं, तो यह कुछ नहीं करता है। बटन क्लिक होने पर डेटाटेबल को रिफ्रेश करने का उचित तरीका क्या है? अग्रिम में धन्यवाद!

javascript  jquery  datatables 
— IAmYourFaja
स्रोत
क्या आपको कोई जावास्क्रिप्ट त्रुटियाँ मिल रही हैं? फायरबग / क्रोम इंस्पेक्टर के साथ जांच करें, हो सकता है कि कुछ और कोड (तालिका और बटन कोड अर्थात) जोड़ें
— गीर्ट
2
— zx1986

जवाबों:

33

आप निम्नलिखित की कोशिश कर सकते हैं:

function InitOverviewDataTable() {
    oOverviewTable = $('#HelpdeskOverview').dataTable({
        "bPaginate": true,
        "bJQueryUI": true, // ThemeRoller-stöd
        "bLengthChange": false,
        "bFilter": false,
        "bSort": false,
        "bInfo": true,
        "bAutoWidth": true,
        "bProcessing": true,
        "iDisplayLength": 10,
        "sAjaxSource": '/Helpdesk/ActiveCases/noacceptancetest'
    });
}

function RefreshTable(tableId, urlData) {
    $.getJSON(urlData, null, function(json) {
        table = $(tableId).dataTable();
        oSettings = table.fnSettings();

        table.fnClearTable(this);

        for (var i = 0; i < json.aaData.length; i++) {
            table.oApi._fnAddData(oSettings, json.aaData[i]);
        }

        oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
        table.fnDraw();
    });
}
// Edited by Prasad
function AutoReload() {
    RefreshTable('#HelpdeskOverview', '/Helpdesk/ActiveCases/noacceptancetest');

    setTimeout(function() {
        AutoReload();
    }, 30000);
}

$(document).ready(function() {
    InitOverviewDataTable();
    setTimeout(function() {
        AutoReload();
    }, 30000);
});

http://www.meadow.se/wordpress/?p=536

— जेवियर्स
स्रोत
यह भी खूब रही! लेकिन मैंने पाया कि आप कॉल कर रहे हैं _fnAddData, जिसे केवल एक निजी फ़ंक्शन के रूप में माना जाता है। क्या यह जोखिम भरा है? मान लीजिए कि भविष्य में फ़ंक्शन हस्ताक्षर को बदला जा सकता है।
— रॉय लिंग
136

DataTables के संस्करण 1.10.0 के साथ, यह अंतर्निहित और आसान है:

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

या केवल

$('#example').DataTable().ajax.reload();

http://datatables.net/reference/api/ajax.reload ()

— atmelino
स्रोत
20
सावधान रहें और उपयोग करें $('#example').DataTable()और नहीं $('#example').dataTable()।
— सेरग्यू
ऐसा करने के बाद मैं डेटाटेबल की सामग्री तक नहीं पहुँच सकता। यह कहता है कि मेरे पास केवल 2 टीआर है (हेडर के साथ एक है, और केवल 1 सेल है जिसमें कोई डेटा नहीं है)। क्या मुझे पहले इसे फिर से तैयार करना है?
— जॉन कोटर
जॉन कोटर: आपके कोड को देखे बिना आपके प्रश्न का उत्तर देना असंभव है। समस्या को पुन: उत्पन्न करने की अनुमति देने के लिए कृपया अपने कोड के साथ एक नए प्रश्न के रूप में पोस्ट करें।
— एटमेलिनो
इससे कोई त्रुटि हो सकती है cannot reinitialise datatable jquery। ऐसा इसलिए होता है क्योंकि tableतालिका के प्रत्येक प्रविष्टि के लिए बार-बार आरंभ किया गया था। इससे बचने के लिए, सुनिश्चित करें कि आप table सिर्फ एक बार ही इनिशियलाइज़ करें ।
— शुभम ए।
4
पेजिंग जानकारी के उपयोग को संरक्षित करने के लिए। table.ajax.reload (शून्य, गलत), आधिकारिक दस्तावेज यहाँ में उल्लिखित datatables.net/reference/api/ajax.reload ()
— श्रीनिवास Rathikrindi
28

पहले नष्ट करने योग्य पदार्थ को नष्ट करें और फिर datatable को आकर्षित करें।

$('#table1').DataTable().destroy();
$('#table1').find('tbody').append("<tr><td><value1></td><td><value1></td></tr>");
$('#table1').DataTable().draw();
— सरेश कृष्णन
स्रोत
चीजें इतनी जटिल क्यों हैं?
— अकमल
धन्यवाद। यहाँ केवल यही एक उत्तर है जो वास्तव में काम करता है।
— सेरिन
27

आप इसे पुनः लोड करने के लिए DataTable के व्यापक API का उपयोग कर सकते हैं ajax.reload()

यदि आप अपना डेटा योग्य DataTable()(नए संस्करण) घोषित करते हैं, तो आपको इसकी आवश्यकता है:

var oTable = $('#filtertable_data').DataTable( );
// to reload
oTable.ajax.reload();

यदि आप अपने dataTable()पुराने (पुराने संस्करण) के रूप में अपना डेटा योग्य घोषित करते हैं :

var oTable = $('#filtertable_data').dataTable( );
// to reload
oTable.api().ajax.reload();
— भर्ती ए.सुक
स्रोत
24

मैं एक ही समस्या थी, यह है कि मैं इसे कैसे तय किया है:

पहले अपनी पसंद की विधि के साथ डेटा प्राप्त करें, मैं परिणाम प्रस्तुत करने के बाद अजाक्स का उपयोग करता हूं जो तालिका में बदलाव करेगा। फिर साफ़ करें और ताज़ा डेटा जोड़ें:

var refreshedDataFromTheServer = getDataFromServer();

var myTable = $('#tableId').DataTable();
myTable.clear().rows.add(refreshedDataFromTheServer).draw();

यहाँ स्रोत है: https://datatables.net/reference/api/clear ()

— Mosd
स्रोत
1
अंत में एक गैर अजाक्स जवाब!
— Fabio Venturi पादरी
क्या वह fnServerData है: getDataFromServer?
— DEREK LEE
एकमात्र जवाब जो डेटा के रूप में एक साधारण जेएस ऑब्जेक्ट का उपयोग करके मेरे लिए काम करता था। धन्यवाद!
— बैन्जी
13 
var ref = $('#example').DataTable();
ref.ajax.reload();

यदि आप एक जोड़ना चाहते हैं पुनः लोड / ताज़ा करें बटन को DataTables 1.10 तब का उपयोग drawCallback ।

नीचे दिए गए उदाहरण (मैं उपयोग कर रहा हूँ देखें DataTables बूटस्ट्रैप सीएसएस) के साथ

var ref= $('#hldy_tbl').DataTable({
        "responsive": true,
        "processing":true,
        "serverSide":true,
        "ajax":{
            "url":"get_hotels.php",
            "type":"POST"
        },
        "drawCallback": function( settings ) {
            $('<li><a onclick="refresh_tab()" class="fa fa-refresh"></a></li>').prependTo('div.dataTables_paginate ul.pagination');
        }
    });

function refresh_tab(){
    ref.ajax.reload();
}
— वाइबिन टी.वी.
स्रोत
11

मैं निम्नलिखित कोड का उपयोग करने की सलाह दूंगा।

table.ajax.reload(null, false);

इसका कारण, उपयोगकर्ता पेजिंग को पुनः लोड पर रीसेट नहीं किया जाएगा।
उदाहरण:

<button id='refresh'> Refresh </button>

<script>
    $(document).ready(function() {

        table = $("#my-datatable").DataTable();
        $("#refresh").on("click", function () { 
         table.ajax.reload(null, false); 
        });

   });
</script>

इसके बारे में विस्तार यहां पाया जा सकता है

— अद कहन
स्रोत
1
यह सही है। रिफ्रेश टेबल के बाद पेज नंबर नहीं बदलने के लिए
— मंथन पटेल
बराबरtable.ajax.reload();
— CodeToLife
हां यह ऊपर के बराबर करता है लेकिन आप बिंदु को याद कर रहे हैं। table.ajax.reload (); टेबल को रिफ्रेश और रिसेट करेगा, यदि आपका पेज 5 पर है और आप उसे रिफ्रेश करते हैं। यह आपको पहले पृष्ठ पर वापस ले जाएगा।
— विज्ञापन कहन
3

यह है कि मैं इसे कैसे करता हूं ... शायद सबसे अच्छा तरीका नहीं है, लेकिन यह निश्चित रूप से सरल (आईएमएचओ) है और इसके लिए किसी अतिरिक्त प्लगइन्स की आवश्यकता नहीं है।

एचटीएमएल

<div id="my-datatable"></div>

jQuery

function LoadData() {
    var myDataTable = $("#my-datatable").html("<table><thead></thead><tbody></tbody></table>");
    $("table",myDataTable).dataTable({...});
}
$(document).ready(function() {
    $("#my-button").click(LoadData);
    LoadData();
});

नोट: jQuery के डेटा के साथ मेरे कामकाज में, कभी-कभी अगर आपके पास नहीं है तो <thead></thead><tbody></tbody>यह काम नहीं करता है। लेकिन आप इसके बिना प्राप्त करने में सक्षम हो सकते हैं। मुझे ठीक से समझ नहीं आया कि यह क्या आवश्यक है और क्या नहीं।

— ड्रू चापिन
स्रोत
3

पहले नष्ट करने योग्य बनाने का प्रयास करें फिर इसे फिर से सेट करें, उदाहरण के लिए

var table;
$(document).ready(function() {
    table = $("#my-datatable").datatable()
    $("#my-button").click(function() {
        table.fnDestroy();
        table = $("#my-datatable").dataTable();
    });
});
— होएंग नघुआ
स्रोत
3

इस कोड का उपयोग तब करें, जब आप अपना डेटेबल ताज़ा करना चाहते हैं: 

 $("#my-button").click(function() {
    $('#my-datatable').DataTable().clear().draw();
 });
— AdagioDev
स्रोत
2

ठीक है, आपने यह नहीं दिखाया कि आप स्क्रिप्ट्स को कैसे / कहाँ लोड कर रहे हैं, लेकिन प्लग-इन एपीआई फ़ंक्शंस का उपयोग करने के लिए, आपको डेटाटेबल्स लाइब्रेरी लोड करने के बाद अपने पेज में इसे शामिल करना होगा, लेकिन इससे पहले कि आप डेटाटेबल को प्रारंभ करें।

इस तरह

<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.fnReloadAjax.js"></script>
— RASG
स्रोत
1

सारणी डेटा प्रदर्शित करने के लिए एलन जार्डिन के डेटाटेबल्स एक बहुत शक्तिशाली और चालाक jQuery प्लगइन है। इसमें कई विशेषताएं हैं और आप जो चाहें वह कर सकते हैं। हालांकि, यह एक मुश्किल तरीका है कि एक सरल तरीके से सामग्री को कैसे ताज़ा किया जाए, इसलिए मैं अपने संदर्भ के लिए, और संभवतः दूसरों के लाभ के लिए भी, यहाँ एक तरह से यह करने का एक पूरा उदाहरण है:

एचटीएमएल

<table id="HelpdeskOverview">
  <thead>
    <tr>
      <th>Ärende</th>
      <th>Rapporterad</th>
      <th>Syst/Utr/Appl</th>
      <th>Prio</th>
      <th>Rubrik</th>
      <th>Status</th>
      <th>Ägare</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

जावास्क्रिप्ट

function InitOverviewDataTable()
{
  oOverviewTable =$('#HelpdeskOverview').dataTable(
  {
    "bPaginate": true,
    "bJQueryUI": true,  // ThemeRoller-stöd
    "bLengthChange": false,
    "bFilter": false,
    "bSort": false,
    "bInfo": true,
    "bAutoWidth": true,
    "bProcessing": true,
    "iDisplayLength": 10,
    "sAjaxSource": '/Helpdesk/ActiveCases/noacceptancetest'
  });
}

function RefreshTable(tableId, urlData)
{
  $.getJSON(urlData, null, function( json )
  {
    table = $(tableId).dataTable();
    oSettings = table.fnSettings();

    table.fnClearTable(this);

    for (var i=0; i<json.aaData.length; i++)
    {
      table.oApi._fnAddData(oSettings, json.aaData[i]);
    }

    oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
    table.fnDraw();
  });
}

function AutoReload()
{
  RefreshTable('#HelpdeskOverview', '/Helpdesk/ActiveCases/noacceptancetest');

  setTimeout(function(){AutoReload();}, 30000);
}

$(document).ready(function () {
  InitOverviewDataTable();
  setTimeout(function(){AutoReload();}, 30000);
});

स्रोत

— मिशेल आइरस
स्रोत
1

var myTable = $ ('# tblIdName'))। DataTable (); myTable.clear () rows.add (myTable.data) .draw ()।;

यह मेरे लिए ajax का उपयोग किए बिना काम किया।

— टी-जयंत डोर
स्रोत
0 
        if(data.length==0){
            alert("empty");
              $('#MembershipTable > tbody').empty();
            // $('#MembershipTable').dataTable().fnDestroy();
                    $('#MembershipTable_info').empty(); 
                    $("#MembershipTable_length").empty();
                    $("#MembershipTable_paginate").empty();

             html="<tr><td colspan='20'><b>No data available in Table</b> </td></tr>";
           $("#MembershipTable").append(html);
        }

        else{
             $('#MembershipTable').dataTable().fnDestroy();
            $('#MembershipTable > tbody').empty();

         for(var i=0; i<data.length; i++){
            //

.......}

— user4022380
स्रोत
0

DataTable सहायता के अनुसार , मैं अपनी तालिका के लिए कर सकता था।

मैं अपने DataTable के लिए कई डेटाबेस चाहता था।

उदाहरण के लिए: data_1.json> 2500 रिकॉर्ड - data_2.json> 300 रिकॉर्ड - data_3.json> 10265 रिकॉर्ड

var table;
var isTableCreated= false;

if (isTableCreated==true) {
    table.destroy();
    $('#Table').empty(); // empty in case the columns change
}
else
    i++;

table = $('#Table').DataTable({
        "processing": true,
        "serverSide": true,
        "ordering": false,
        "searching": false,
        "ajax": {
            "url": 'url',
            "type": "POST",
            "draw": 1,
            "data": function (data) {
                data.pageNumber = (data.start / data.length);
            },
            "dataFilter": function (data) {
                return JSON.stringify(data);
            },
            "dataSrc": function (data) {
                if (data.length > 0) {
                    data.recordsTotal = data[0].result_count;
                    data.recordsFiltered = data[0].result_count;
                    return data;
                }
                else
                    return "";
            },

            "error": function (xhr, error, thrown) {
                alert(thrown.message)
            }
        },
        columns: [
           { data: 'column_1' },
           { data: 'column_2' },
           { data: 'column_3' },
           { data: 'column_4' },
           { data: 'column_5' }
        ]
    });
— समुदाय
स्रोत
0

अगर datable v1.10.12 का उपयोग कर रहे हैं, तो बस कॉलिंग .draw()विधि और अपने आवश्यक ड्रा प्रकार पारित कर रहे हैं full-reset, pageतो आप नए डेटा के साथ अपने dt को फिर से आकर्षित करेंगे

let dt = $("#my-datatable").datatable()

// कुछ क्रिया करें

dt.draw('full-reset')

अधिक जांच योग्य डॉक्स के लिए

— जिमी ओबोनियो अबोर
स्रोत
0

मैंने कुछ ऐसा किया था जो इससे संबंधित है ... नीचे एक नमूना जावास्क्रिप्ट है जिसकी आपको आवश्यकता है। यहाँ इस पर एक डेमो है: 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"><span aria-hidden="true">&times;</span></button>'+
                              '<strong> <span class="glyphicon glyphicon-ok-sign"></span> </strong>'+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"><span aria-hidden="true">&times;</span></button>'+
                              '<strong> <span class="glyphicon glyphicon-exclamation-sign"></span> </strong>'+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

आपको अपडेट ऑपरेशन करने के बाद कोड की यह पंक्ति लिखनी होगी।

$('#example').DataTable().ajax.reload();

— मंथन पटेल
स्रोत
-2 
    function autoRefresh(){
        table.ajax.reload(null,false); 
        alert('Refresh');//for test, uncomment
    }

    setInterval('autoRefresh()', 5000);
— user8108068
स्रोत
-6

Init के साथ डेटा को फिर से संगठित करने और लिखने को सही ..done..so सरल के रूप में पुनर्प्राप्त करें

जैसे।

TableAjax.init();
retrieve: true,
— वायरल राणा
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.