[JQuery] DataTables相關資料與屬性設置

DataTables是一個非常好用的JQuery分頁套件，主要是屬性很多，可以進行客製化。

DataTables的官方網站

官方網站有許多屬性的相關資料，以下為

使用上的畫面大致為~

※自官方網站截下來的範例圖

屬性設定方式是在宣告datatable的function裡面塞入屬性。

$(document).ready(function() { 

             $('#example').dataTable( {

                          "bPaginate": false, 

                          "bLengthChange": false, 

                          "bFilter": true, 

                          "bSort": false, 

                          "bInfo": false, 

                          "bAutoWidth": false

              } ); 

} );

以下介紹幾個常用的屬性：(官網 Usage->Feature 裡有原文)

bAutoWidth：自動調整欄位寬度(true or false)

bFilter：右上角的關鍵字搜尋功能(true or false) 


bInfo：下方顯示Showing 1 to X of O entries欄位(true or false)

bJQueryUI：使用jQuery UI ThemeRoller

bLengthChange：左上角選擇一次顯示多少筆資料(true or false)

bPaginate：顯示下方切頁按鈕(true or false)

bProcessing：是否顯示"資料正在處理中"的提示(true or false)

bSort：關閉所有欄位的sorting(true or false)，如果要關閉單一欄位使用"bSortable"

bStateSave：使用cookies記錄使用者目前瀏覽datatable的狀態(true or false)，例如切到哪一頁，之後固定時間內回來還是會看到那一頁。



還有一些針對欄位設定的屬性：


aoData：設定每個欄位自己的屬性，以下範例為第六個欄位不能被關鍵字搜尋，也不能排序。

"aoData": [   null, null,  null,  null,  null,   { "bSortable": false, "bSearchable": false } ]

aaSorting：設定欄位排序的屬性，以下範例為第三個欄位(由0開始)以倒序排序。

"aaSorting": [[ 2, "desc" ]]

如果要進行語言標籤的設置，也可以在屬性部分進行設定：


oLanguage：設定各個語言標籤屬性，如下範例。

"oLanguage": {

                "sProcessing": "Processing...",
                "sLengthMenu": "Show _MENU_ entries",
                "sZeroRecords": "No matching records found",
                "sEmptyTable": "No data available in table",
                "sInfo": "Showing _START_ to _END_ of _TOTAL_ entries",
                "sInfoEmpty": "Showing 0 to 0 of 0 entries",
                "sInfoFiltered": "(filtered from _MAX_ total entries)",
                "sInfoPostFix": "",
                "sSearch": "Search:",
                "sUrl": "",
                "oPaginate": {
                    "sFirst":    "First",
                    "sPrevious": "Previous",
                    "sNext":     "Next",
                    "sLast":     "Last"
                }

}