如何在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()填充数据表，从您的单击事件