JQuery DataTables 是 JQuery 的 DataTable 元件，需要使用 jQuery 1.7 以後的版本。

使用時需再 HTML 檔建立 Table，設定 Header 與 Footer，如果是要用 Client side 處理的話，這邊可連帶設定欲呈現的資料：


            Column 1
            Column 2

            Row 1 Data 1
            Row 1 Data 2

            Row 2 Data 1
            Row 2 Data 2

Table 建好後，加上對應的 JavaScript 檔引用：

加入 JavaScript，用 JQuery 找到剛在 HTML 中建立的 Table，接著叫用 DataTable() 方法去啟用 JQuery Table：

$(document).ready( function () {
    $('#table_id').DataTable();
} );

{% img /images/posts/JQueryDataTables/1.png %}

啟用的同時可視需求下去設定對應的參數：

$(document).ready( 
    function () 
    {
        $('#table_id').DataTable(
        {
            "bProcessing": true,
            "sPaginationType": "full_numbers",
            "bFilter": true,
            "iDisplayLength": 1,
            "bJQueryUI": true,
            "sDom": 'rt',
        });
    }
);

像是欄位的設定、分頁與排序的設定，或是設定是要做 Client side 的處理還是 Server side 的處理。

{% img /images/posts/JQueryDataTables/2.png %}

詳細的參數可參閱 DataTables - Usage。