GridView + DataTables.js

如果想要在GridView控制項上套用DataTables.js的話有以下幾種方式。

一、純顯示用的GridView

由於DataTables使用上需要套在完整的table格式中, 使用GridView會沒有<thead>的部分，將無法套用。

這時請在後端你的Gridview DataBound區塊加入以下程式碼：

If (e.Row.RowTye = DataControlRowType.Header) Then
    e.Row.TableSection = TableRowSection.TableHeader
End If

二、有控制項的Gridview

有控制項的GridView則不適用「一」的方法，由於控制項有Postback的問題，在Postback後，DataTables並不會再重新initiate一次，這時不要更改後端code，直接用前端JS加入<thead>。判斷方式如下

$(document).ready( function() {
    bindDataTable();
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(bindDataTable);
})
Function bindDataTable() {
    if (document.getElementById(”<% YourGridViewID.ClientID %>”).rows.length > 1) {
        $(”#YourGridViewID”).prepend($(”<thead></thead>”).append($(”#YourGridViewID”).find(”tr:first”))).DataTable 
    });
}

註：套用時記得要引用Datatables CSS & JS。