डेटाटेबल्स को रीफ्रेश कैसे करें

Question

मैं अपनी तालिका इंटरैक्टिव बनाने के लिए डेटाटेबल प्लगइन का उपयोग कर रहा हूं।

तालिका पृष्ठ पर PHP द्वारा echo'd है।

जब मैं डीबी में एक रिकॉर्ड जोड़ता हूं तो मैं jQuery लोड() का उपयोग कर तालिका लोड कर रहा हूं लेकिन यह डेटाटेबल्स को तोड़ देता है।

डेटाटेबल्स को बरकरार रखते हुए मैं तालिका को कैसे अपडेट कर सकता हूं?

नोट: मैं डेटा स्रोत के रूप में डीओएम का उपयोग कर रहा हूं और सर्वर साइड प्रोसेसिंग नहीं कर रहा हूं।

Answer 1

यदि संपूर्ण तालिका का पूर्ण पुनः लोड करना है, तो अपने प्रारंभिक डेटाटेबल्स प्रारंभिक कोड को फ़ंक्शन में लपेटें। पृष्ठ लोड पर उस कार्य को कॉल करें। मेज को पूरी तरह से AJAX के साथ बदलते समय आपको तालिका के मूल div को हटा देना चाहिए जो प्लगइन द्वारा बनाई गई सभी गैर तालिका तालिकाओं के लिए एक रैपर के रूप में बनाई गई है। यदि टेबल आईडी = "उदाहरण", रैपर आईडी = "example_wrapper"।

यहां पर्याप्त कोड आपको अपने रास्ते पर अच्छी तरह से प्राप्त करेगा। वहाँ केवल अद्यतन पंक्तियों के लिए आसान तरीके हैं, लेकिन मैं का पालन किया है कि

function initDataTables(){ 
    $('#myTable').datatables({/* put all current options here*/}) 

} 


/* within ready event of pageload */ 

$(function(){ 
    initDataTables(); 
    /* all other page load code*/ 

}); 

/* use $.get to reload table */ 

$.get(tableUpdateUrl, data, function(returnData){ 

    $('#myTable').parent().replaceWith(returnData); 

    /* re-initalize plugin*/ 

    initDataTables(); 
}); 

Answer 2

आप AJAX प्लगइन का उपयोग करने में सक्षम होना चाहिए। http://datatables.net/plug-ins/api

Answer 3

जब आप अपने डेटा तालिका बनाने, एक चर में जिसके परिणामस्वरूप मूल्य निर्दिष्ट के बाद से अनुरोध एक पूरी तालिका पुनः लोड के लिए है:

var table = $(".something").dataTable(); 

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

success: function(response){ 
    table.fnAddData([ 
     response.id, 
     response.name, 
     response.description, 
    ]); 
} 

आप fnAddData विधि here के बारे में अधिक पढ़ सकते हैं।