單擊按鈕時更新datatables（jQuery）

Question

我創建了一個簡單的表單，並使用Datatables jQuery插件在其中顯示一些數據。數據由php腳本（process.php）填充，以JSON格式返回正確的結果。在表單中，有一個按鈕將文本框的值發送到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> 

要創建數據表，我用下面的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當你設置你的datable，如果你想使用ajax POST：http://datatables.net/ref#fnServerData

也有可能您不需要撥打fnReloadAjax()，但只能撥打fnDraw()。 fnReloadAjax()是一個插件函數，所以我假設你之前加載過它。

Answer 2

fnReloadAjax是你應該使用的（我相信它可能會重新構建到函數中）。但問題在於，儘管您再次進行.ajax調用，但該調用中的數據根本不與您的數據表相關聯，並且永遠不會與其綁定。

使用fnReloadAjax將進行與您在表初始化中指定的相同的Ajax調用。因此，Stefan提到，您需要的是在您的數據表設置中指定您的參數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

最後，我找到了解決辦法！有兩個問題在我的jQuery代碼：

1. 我不得不添加fnReloadAjax（）代碼的腳本標籤，其負載數據表和$（文件）。就緒（）之前語句之後。
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();