अद्यतन डेटाटेबल्स (JQuery) जब बटन क्लिक किया जाता है

Question

मैंने एक साधारण रूप बनाया है और मैं इसमें डेटा प्रदर्शित करने के लिए डेटाटेबल्स jQuery प्लगइन का उपयोग कर रहा हूं। डेटा को एक php स्क्रिप्ट (process.php) द्वारा पॉप्युलेट किया जा रहा है जो JSON प्रारूप में उचित परिणाम देता है। प्रपत्र में, एक बटन है जो textbox के मान को process.php पर भेजता है। समस्या यह है कि जब मैं बटन पर क्लिक करता हूं तो मैं process.php स्क्रिप्ट द्वारा प्राप्त किए गए नए डेटा के साथ डेटाटेबल को अद्यतन/परिवर्तित नहीं कर सकता।

फार्म के कोड:

<form name="myform" id="myform" action="" method="POST"> 
    <label for="id">Enter an id:</label> 
    <input type="text" name="txtId" id="txtId" value=""/> 
    <input type="button" id="btnSubmit" name="btnSubmit" value="Search"> 
</form> 

<div id="results"> 
    <table class="display" id="example"> 
     <thead> 
      <tr> 
       <th>id</th> 
       <th>Surname</th> 
       <th>Name</th> 
      </tr> 
     </thead> 
     <tbody> 
      <!-- data goes here --> 
     </tbody> 
    </table> 
</div> 

datatable बनाने के लिए, मैं निम्नलिखित JQuery कोड का उपयोग कर रहा:

$(document).ready(function() { 
      var oTable = $('#example').dataTable({ 
       "sPaginationType": "full_numbers", 
       "iDisplayLength": 10, 
       //"bServerSide": true, 
       "sAjaxSource": "process.php" 
      }); 

     $("#btnSubmit").click(function(){ 
      $.ajax({ 
       type: "POST", 
       url: "process.php", 
       data: 'txtId=' + $("txtId").val(), 
       success: function(result) { 
        oTable.fnReloadAjax(); 
        oTable.fnDraw(); 
       } 
      }); 
     }); 
    }); 

process.php लिपि (ठीक काम करता है) है:

<?php 
$result=""; 
if (empty($_REQUEST["txtId"])) {  
    $result = '{"aaData":[["1","Surname1","Name1"]]}'; 
} 
else { 
    $result = '{"aaData":[["2","Surname2","Name2"]]}'; 
} 
print $result; 
?> 

Answer 1

ऐसा लगता है कि आप अपने डेटाटेबल को सेट करते समय fnServerData निर्दिष्ट करना चाहिए, अगर आप AJAX का उपयोग करना चाहते हैं पोस्ट: http://datatables.net/ref#fnServerData

यह भी संभव है कि आपको fnReloadAjax() पर कॉल करने की आवश्यकता न हो, लेकिन केवल fnDraw()। fnReloadAjax() एक प्लगइन फ़ंक्शन है, इसलिए मुझे लगता है कि आपने पहले इसे लोड किया था।

Answer 2

fnReloadAjax वह है जो आपको उपयोग करना चाहिए (और मेरा मानना ​​है कि इसमें फ़ंक्शन में एक रेड्रा बनाया गया हो सकता है)। लेकिन समस्या यह है कि, हालांकि आप एक दूसरा .ajax कॉल करते हैं, उस कॉल का डेटा आपके डेटाटेबल से बिल्कुल जुड़ा नहीं है और कभी भी इसके लिए बाध्य नहीं होगा।

fnReloadAjax का उपयोग करके उसी तालिका को शुरू किया जाएगा जिसे आपने अपनी तालिका प्रारंभ में निर्दिष्ट किया था। तो स्टीफन का उल्लेख करने के लिए आपको क्या चाहिए, अपने डेटाटेबल सेटिंग्स में fnServerData पैरामीटर निर्दिष्ट करना है (लेकिन Success पैरामीटर को मिटाएं, क्योंकि उन पंक्तियों के साथ कुछ पहले से ही डेटाटेबल्स द्वारा माना जाता है)। फिर बस अपना बटन कॉल करें fnReloadAjax()।

$(document).ready(function() { 
     var oTable = $('#example').dataTable({ 
      "sPaginationType": "full_numbers", 
      "iDisplayLength": 10, 
      "sAjaxSource": "process.php", 
      "fnServerData": function (sSource, aoData, fnCallback) { 
       $.ajax({ 
        "dataType": 'json', 
        "type": "POST", 
        "url": sSource, 
        "data": 'txtId=' + $("txtId").val(), 
        "success": fnCallback 
       }); 
      } 
     }); 

    $("#btnSubmit").click(function(){ 
     oTable.fnReloadAjax(); 
    }); 
}); 

Answer 3

अंत में, मैं समाधान नहीं मिला:

यहाँ अपने अंतिम कैसा दिखना चाहिए है!

1. मैं स्क्रिप्ट टैग जो लोड datatables और इससे पहले कि $ (document) .ready() बयान के बाद fnReloadAjax() कोड जोड़ने के लिए किया था: मेरे JQuery कोड में 2 समस्याएं थीं।
2. मुझे अपने सबमिट बटन के JQuery कोड को बदलना पड़ा (AJAX कॉल की आवश्यकता नहीं है, केवल fnReloadAjax() आवश्यक है)।

स्टीफन & mbeasley दोनों धन्यवाद!

JQuery कोड है:

// 
// fnReloadAjax() code  
// 
    $.fn.dataTableExt.oApi.fnReloadAjax = function (oSettings, sNewSource, fnCallback, bStandingRedraw) 
    { 
     if (typeof sNewSource != 'undefined' && sNewSource != null) 
     { 
      oSettings.sAjaxSource = sNewSource; 
     } 
     this.oApi._fnProcessingDisplay(oSettings, true); 
     var that = this; 
     var iStart = oSettings._iDisplayStart; 
     var aData = []; 

     this.oApi._fnServerParams(oSettings, aData); 

     oSettings.fnServerData(oSettings.sAjaxSource, aData, function(json) { 
      /* Clear the old information from the table */ 
      that.oApi._fnClearTable(oSettings); 

      /* Got the data - add it to the table */ 
      var aData = (oSettings.sAjaxDataProp !== "") ? 
       that.oApi._fnGetObjectDataFn(oSettings.sAjaxDataProp)(json) : json; 

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

      oSettings.aiDisplay = oSettings.aiDisplayMaster.slice(); 
      that.fnDraw(); 

      if (typeof bStandingRedraw != 'undefined' && bStandingRedraw === true) 
      { 
       oSettings._iDisplayStart = iStart; 
       that.fnDraw(false); 
      } 

      that.oApi._fnProcessingDisplay(oSettings, false); 

      /* Callback user function - for event handlers etc */ 
      if (typeof fnCallback == 'function' && fnCallback != null) 
      { 
       fnCallback(oSettings); 
      } 
     }, oSettings); 
    } 


    $(document).ready(function() { 

     var oTable = $('#example').dataTable({ 
      "sPaginationType": "full_numbers", 
      "iDisplayLength": 10, 
      //"bServerSide": true, 
      "sAjaxSource": "process.php" 
     }); 

     $("#btnSubmit").click(function(){ 
      oTable.fnReloadAjax("process.php?txtId=" + $("txtId").val()); 
     }); 

    }); 

Answer 4

आप वैकल्पिक रूप से सिर्फ तालिका को नष्ट करने और यह भी पुन: हो सकता है।

var oTable = null; 

function reloadTable() { 
    if (oTable) { 
     oTable.fnDestroy(); 
    } 

    oTable = $('#example').dataTable({ 
     "sPaginationType": "full_numbers", 
     "iDisplayLength": 10, 
     //"bServerSide": true, 
     "sAjaxSource": "process.php" 
    }); 
} 

reloadTable();