關於JQUERY的DataTable外掛的使用過程筆記【持續更新中……】
推薦學習站點：http://datatables.club/
1、Ajax與遠端伺服器
因為一般我們的資料都是實時從遠端伺服器中獲取，所以我們需要使用Ajax方式來獲取發起請求，需要設定的引數："processing": true,
"serverSide": true,
"ajax": "action/Handler.ashx?mode=x",又因為返回的JSON資料有特定的格式要求，所以伺服器端先自定義一個類來構建資料物件，然後序列化為符合要求的JSON
#region 日誌資料類logObj
public class logObj
{
public int draw;
public long recordsTotal;
public int recordsFiltered;
public List<logObjItem> data=new List<logObjItem>();
public class logObjItem
{
public long logID;
public string logTime;
public string logOperator;
public string logTitle;
public string logInfo;
public string logType;
}
}
#endregion在這裡的data成員，按照預設的規則應該是一個List<string[]>型別的，但是這樣不大好處理，就將字串陣列也改為一個類來處理了。
2、混合列資料
遠端伺服器返回資料到客戶端後，需要將資料繫結到DataTable上，但是有時候並不是所有的列都是現實資料的，有些可能會現實一些操作按鈕或複選框什麼的，這樣就需要用到自定義每列的資料顯示了。
"aoColumns": [{ "mDataProp": null, "sClass": "center" },
{ "mDataProp": "logType" },
{ "mDataProp": "logTime"},
{ "mDataProp": "logOperator" },
{ "mDataProp": "logTitle" },
{ "mDataProp": null, "sClass": "center" }
],//這個用來設定每列對應的資料欄位（data成員中的各個屬性名）
"aoColumnDefs": [
{
"bSortable": false,
sClass: "center",
"render": function (data, type, full) {
return "<label class=\"pos-rel\"><input type=\"checkbox\" class=\"ace\" /><span class=\"lbl\"></span></label>";
},
"targets": 0
},
{
"bSortable": false,
sClass:"center",
"render": function (data, type, full) {
return "<div class=\"hidden-sm hidden-xs action-buttons\"><a class=\"blue logShow\" href=\"#\" rel=\"" + full.logID + "\"><i class=\"ace-icon fa fa-search-plus bigger-130\"></i></a><a class=\"red logDel\" href=\"#\" rel=\"" + full.logID + "\"><i class=\"ace-icon fa fa-trash-o bigger-130\"></i></a></div>";
},
"targets":5
}
],//自定義的列中所需要顯示的內容
3、自定義類中的事件監聽
因為自定義列中需要新增事件監聽的物件都是後期動態新增上去的，所以按照一般寫法直接在document.ready中用ID或者CLASS的方式來獲取物件貌似無效，需要利用DataTable中的tbody來find該物件，並繫結事件監聽
$('#dynamic-table tbody').on('click', 'a.logShow', function () {
var data = oTable1.row($(this).parents('tr')).data();
alert(data[0] + "'s salary is: " + data.logTime);
});//獲取當前操作物件所在行的資料來源物件，然後根據資料來源對應的各個屬性來獲取想要的值
4、分頁和搜尋
DataTable的分頁和搜尋可以合併在一起分析，因為涉及到兩個資料值：總記錄數和篩選記錄數。如果本身禁用了DataTable的searching功能，那麼兩者是一樣，如果沒有禁用那麼需要傳遞相應引數到伺服器端。通過檢視頁面的網路傳遞引數值，我們發現DataTable在開啟遠端伺服器功能後會默默地傳遞很多資料到遠端伺服器，包括一些全域性的和一些對應每列的資料，我們這裡主要需要幾個全域性的引數：draw（還沒看文件，個人認為是重畫次數，遠端伺服器Request後直接拿來用，不用做任何處理）、start（每頁的開始序號）、length（每頁的條數）、search[value]（這個引數名的寫法要注意，用來傳遞搜尋關鍵詞）。然後為了實現獲取當前頁的那些資料，所以需要定義一個儲存過程（貌似MySQL資料庫直接可以用LIMIT關鍵字，MsSQL不行）
CREATE PROCEDURE [dbo].[P_GetLog_Paging]
@pageIndex int, --頁索引
@pageSize int, --每頁記錄數
@searchWord nvarchar(100) --搜尋關鍵字
AS
BEGIN
set nocount on;
declare @sql nvarchar(500)
set @sql='SELECT logID,logTime,logOperator,logTitle,logInfo,logType
FROM (
SELECT t.*,ROW_NUMBER()OVER(ORDER BY t.logID) AS rownum
FROM logList t where logType like ''%'+@searchWord+'%'' or logTime like ''%'+@searchWord+'%'' or logInfo like ''%'+@searchWord+'%''
) AS a
WHERE rownum BETWEEN ('+str(@pageSize)+' * ('+str(@pageIndex)+' - 1)) + 1 AND '+str(@pageSize)+' * '+str(@pageIndex)+''
execute(@sql)
set nocount off;
END然後就可以用程式碼來獲取以下幾個內容了：draw、總記錄數（直接一句SQL語句獲取所有記錄個數）、篩選後的記錄數（呼叫儲存過程後得到的記錄數）、data（每條記錄的資料繫結到這個List<>上去），最後JSON序列化輸出到客戶端即可。
5、DataTable的重繪
$("#objID").dataTable().fnDraw(false)
6、【待續】