2013-04-18 78 views
2

我已經使用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" 
     }] 
}); 

回答

1

,直到你想要的表不要調用.dataTable()方法。下面的例子:

var myTable = null, 
    dtOptions = { 
     "table-layout": "fixed", 
     "bJQueryUI": true, 
     //...rest of options... 
    }; 

$('#button').click(function (e) { 
    myTable = $('table#myTable').dataTable(dtOptions); 
}); 

,或者,如果你不需要訪問選項表已被初始化後:

$('#button').click(function (e) { 
    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" 
      }] 
    }); 
}); 
+0

其實我想從表格開始,但沒有任何數據。我設法在'fnServerData'中解決這個問題 - 當第一個請求完成並且sEcho == 1時,我只是調用fnCallback但是使用空數據集。這給了我開始時的空表,然後當我想加載數據時,我在按鈕點擊處理程序中調用'fnDraw(false)'。 – Misiu

6

只需指定iDeferLoading參數數據表,與記錄數的表中已包含DOM,如果沒有記錄,則爲0。

$(document).ready(function() { 
$('#example').dataTable({ 
    "bProcessing": true, 
    "bServerSide": true, 
    "sAjaxSource": "scripts/server_processing.php", 
    "iDeferLoading": 0 
}); 
}); 
+0

謝謝!我沒有意識到我可以在這種情況下使用它:) – Misiu

+0

謝謝。有用。 –

相關問題