如何在ajax中使用datatables

Question

我想通過ajax嘗試使用datatables.net進行分頁。

我具有發送開始日期和結束日期和以下2個輸入字段是表結構

<table class="table table-hover" id="example"> 
       <thead> 
      <tr> 
      <th>Loan ID</th> 
      <th>Date</th> 
      <th>Loan Amount</th> 
      <th>Loan Type</th> 


      </tr> 
     </thead> 
     <tbody id="amount"></tbody></table> 

按鈕被點擊時，我調用此函數

$('#recv').click(function(){ 
     var fromDate=$('#from').val(); 
     var toDate=$('#to').val(); 

     var test=$.ajax({ 
      type: "GET", 
      url: "/project/getDetails", 
       data:{"fromDate":fromDate,"toDate":toDate}, 
       dataType:"json",async:false 
     }).responseText; 
     var result = eval('('+test+')'); 
     $('#example').dataTable({ 
      "bServerSide": true, 
      "sAjaxSource": result, 
      "bProcessing": true, 
      "aoColumns": [ 
          { "sName": "Loan_ID", 
           "bSearchable": false, 
           "bSortable": false 

          }, 
          { "sName": "Date" }, 
          { "sName": "Loan_Amount" }, 
          { "sName": "Loan_Type" } 
         ] 
     }); 

當過我點擊按鈕，然後我得到錯誤警告框說datatables警告id =示例ajax錯誤

可以任何身體請告訴我如何解決？

Answer 1

讓數據表照顧Ajax調用：

var oTable = $('#example').dataTable({ 
    "bServerSide": true, 
    "iDeferLoading": 1, 
    "sAjaxSource": "/project/getDetails", 
    "fnServerParams": function (aoData) { 
     aoData.push({ "name": "fromDate", "value": $('#from').val() }); 
     aoData.push({ "name": "toDate", "value": $('#to').val() }); 
     }, 
    "bProcessing": true, 
    "aoColumns": [ 
        { "sName": "Loan_ID", 
        "bSearchable": false, 
        "bSortable": false 
        }, 
       { "sName": "Date" }, 
       { "sName": "Loan_Amount" }, 
       { "sName": "Loan_Type" } 
       ] 
     }); 

$('#recv').click(function(){ 
    oTable.fnDraw(); 
}); 

注意要點：

• fnServerParams這通過您的開始&結束日期爲 getDetails功能
• iDeferLoading - 防止表頁面加載人口
• fnDraw()填充數據表，從您的單擊事件