我已經使用DataTables構建了簡單的表,並且我成功連接了服務器端腳本以用數據填充我的表。datatables和服務器端處理 - 按需加載
在我的桌子上方,我有2個複選框和2個日期選擇來指定過濾器標準。 當我的頁面加載時,我得到表格填充,因爲在啓動時,datatable從服務器拉第一頁的數據。
我想禁用第一次初始數據加載,所以當頁面加載時,我會得到空表,然後我會選擇標準後按'加載'按鈕數據將被加載。
我知道如何將我的過濾條件添加到服務器參數中,我需要做的是在用戶單擊按鈕後從服務器加載數據。
下面是我的數據表腳本:
var myTable= $('table#myTable').dataTable({
"table-layout": "fixed",
"bJQueryUI": true,
"sDom": '<"H"lpr>t<"F"ip>',
"iDisplayLength": 25,
"aLengthMenu": [[25, 50, 100, 500], [25, 50, 100, 500]],
"bSort": false,
"sPaginationType": "full_numbers",
"bPaginate": true,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "Data.asmx/Sales",
"fnServerData": function(sSource, aoData, fnCallback) {
var sEcho = aoData[0].value;
var iDisplayStart = aoData[3].value;
var iDisplayLength = aoData[4].value;
$.ajax({
contentType: "application/json; charset=utf-8",
type: "POST",
url: sSource,
//below are my parameters
data: "{'sEcho': '" + sEcho
+ "','iDisplayStart': '" + iDisplayStart
+ "','iDisplayLength': '" + iDisplayLength
+ "'}",
success: function(msg) {
fnCallback(msg.d);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.responseText);
}
});
},
"bAutoWidth": false,
"aoColumns": [{
"sType": "numeric",
"mData": "Nr",
"sWidth": "50px"
}, {
"sType": "string",
"mData": "Name"
}, {
"sType": "string",
"mData": "Surname"
}]
});
其實我想從表格開始,但沒有任何數據。我設法在'fnServerData'中解決這個問題 - 當第一個請求完成並且sEcho == 1時,我只是調用fnCallback但是使用空數據集。這給了我開始時的空表,然後當我想加載數據時,我在按鈕點擊處理程序中調用'fnDraw(false)'。 – Misiu