Jquery Datatables使用JQuery Datatables從服務器

Question

返回附加信息，並且一切進展順利。

我已經制定了如何將附加信息從客戶端發送到服務器。現在，我想回到其他方式。

那麼，如何從服務器發送額外的信息到客戶端。我原以爲我可以在返回的JSON中添加一個額外的條目並將其拉出。我可能想要發回的一個項目是服務器處理響應的時間。然後我可以將這些信息顯示給用戶。

任何幫助將不勝感激。謝謝

Answer 1

我認爲你得到了一切正確。您只需將附加數據服務器端附加到JSON對象中，然後在「fnServerData」中獲取它。您可以將此代碼添加到inizialization對象：通常你有3個參數「iTotalRecords」一個JSON（行的總數），「iTotalDisplayRecords」：

 "fnServerData": function (sSource, aoData, fnCallback) { 
      $.getJSON(sSource, aoData, function (json) { 
//Here you can do whatever you want with the additional data 
       console.dir(json); 
//Call the standard callback to redraw the table 
       fnCallback(json); 
      }); 
     } 

服務器端，只要你想，你可以添加任意多的參數（如果您使用過濾器，則過濾總數）和aaData（包含行的關聯數組）。如果添加例如「iProcessingTime」（花費的時間處理服務器端）你可以這樣做：

 "fnServerData": function (sSource, aoData, fnCallback) { 
      $.getJSON(sSource, aoData, function (json) { 
//take the processing time and put it in a div 
       $('#processingTime').html(json.iProcessingTime); 
//pass the data to the standard callback and draw the table 
       fnCallback(json); 
      }); 
     } 

這是你需要什麼？

Answer 2

@Nicola Peluchetti的回答是對的。但是，如果你是以下這個例子http://datatables.net/release-datatables/examples/server_side/post.html並沒有（因爲某些原因）要使用的getJSON，這個工程太

 "fnServerData": function (sSource, aoData, fnCallback) { 
      $.ajax({ 
       "dataType": 'json', 
       "type": "POST", 
       "url": sSource, 
       "data": aoData, 
       "success": function(json){ 
        $('#processingTime').html(json.iProcessingTime); // iProcessingTime is the variable that we added in JSON at the server side 
        fnCallback(json); 
       } 
      });    
     } 

Answer 3

也可以從使用「fnInitComplete」功能JSON文件獲取信息，在表的繪製事件完成後調用它（包括數據行）。

$('#example').dataTable({ 
    "fnInitComplete": function(oSettings, json) { 
     //Do something with json variable 
    } 
    }); 

Answer 4

以上建議沒有幫助。

我有一個ajax服務器端，可分頁的實現。當用戶輸入新的搜索詞時，必須刷新，因此使用「fnInitComplete」不是一個選項，因爲它只在DataTable對象初始化時觸發一次。

覆蓋fnServerData也不起作用。

所以不是我最終經由DATASRC抓住從JSON的iProcessingTime實現它：

var table = $('#pkgTable').DataTable({ 
    "processing" : true, 
     "serverSide" : true, 
     "sPaginationType" : "jPaginator", 
     "ajax": { 
      "url" : urlStr, 
      "type" : "POST", 
      "dataSrc": function(json) { 
      var iProcessingTimeMS = json.iProcessingTime; 
      var iProcessingTimeS = iProcessingTimeMS/1000; 
      $("#processingTime").html("Search Time: " + iProcessingTimeMS + " ms. " + iProcessingTimeS + " s."); 
      return json.aaData; 
     } 
     }, 
     "oLanguage": { 
      "sProcessing": "<span style='color: red; font-weight: bold'>Please Wait...</span>", 
      "sZeroRecords": "No Records Found...", 
      "sSearch":  "Search All:", 
      "sUrl":   "", 
      "oPaginate": { 
          "sFirst" : "<b>&lt;&lt;</b>", 
          "sLast"  : "<b>&gt;&gt;</b>", 
          "sPrevious" : "<b>&lt;</b>", 
          "sNext"  : "<b>&gt;</b>" 
        }, 
      "sLengthMenu": 'Display <select>' + 
        '<option value="10">10</option>' + 
        '<option value="20">20</option>' + 
        '<option value="50">50</option>' + 
        '<option value="100">100</option>' + 
        '</select> records' 
     } 
}); 

Answer 5

<div id="category"></div> 

$('#example').dataTable({ 
    "fnInitComplete": function(oSettings, json) { 
     $('#category').html(json.category); 
    } 
    }); 

這似乎爲我工作的罰款。

Answer 6

"fnDrawCallback": function(oSettings) { 
    console.log(oSettings.json);//do whatever with your custom response 
    },