DataTables的啟始相當簡單，只要呼叫dataTable方法就可以，真正複雜的是傳入的選項參數。
// 指定ID為TBL的元素執行dataTable方法，並傳入參數_oTableOptions(JSON格式). oTable = $("#TBL").dataTable(_oTableOptions);
選項參數的完整列表請參考Usage Features與Usage Options，在仔細觀看這些參數項目前，最好先了解一下DataTables各個識別字使用的慣用命名規則：
- a – array
- b – boolean
- f – float
- fn – function
- i – integer
- n – node (表格的一個節點)
- o – object
- s – string
其實就是來自微軟的簡化過的Hungarion Notation，因此選項aaData從名稱就可以知道是存放資料的二維陣列(aa = Array of Array)。以下是我常用的選項項目與它們的簡單說明：
- bJQueryUI： 是否與jQuery UI整合
- oLanguage： {‘sUrl’: ‘語言文字檔’}或直接傳JSON物件；語言檔內容範例：
{ "sProcessing": "處理中...", "sLengthMenu": "顯示 _MENU_ 筆記錄", "sZeroRecords": "無符合資料", "sInfo": "目前記錄：_START_ 至 _END_, 總筆數：_TOTAL_", "sInfoEmpty": "無任何資料", "sInfoFiltered": "(過濾總筆數 _MAX_)", "sInfoPostFix": "", "sSearch": "過濾", "sUrl": "", "oPaginate": { "sFirst": "首頁", "sPrevious": "上頁", "sNext": "下頁", "sLast": "末頁" } }
- bProcessing：是否顯示資料處理中的訊息
- aoColumnDefs：欄位定義陣列，以各種定義參數的兩個元素組成，第一個是選項名，第二個aTargets指定作用的欄位編號。以下範例將欄位0設成不能排序，欄位5、6內容右靠：
[ { "bSortable": false, "aTargets": [ 0 ] }, { "sClass": "align_right", "aTargets": [ 5,6 ] } ]
- bPaginate：是否使用資料分頁模式
- DataTables的資料顯示大致有分頁與捲動兩種模式，bPaginate設成true時，可以再用sPaginationType來設定分頁的顯示格式
- 預設的格式有"two_button"與"full_numbers"兩種
- 如果不使用分頁模式則會變成捲動模式，必須以sScrollY指定顯示的高度，當資料超出指定大小時就會變成捲動，如："sScrollY": "450px"
- 在捲動模式下，表格是否依據資料筆數而自動浮動顯示。當"bScrollCollapse":"true"時，只有兩筆資料則表格底部會緊鄰第二筆下方，若設成"false"則表底會固定在450px的位置
只要這些參數就能讓DataTables顯示出一個很專業的資料表格。以下是測試環境建置的步驟：
- 由DataTables下載網址將最新版的v1.8.2壓縮檔存入硬碟
- 解壓縮到c:\tmp，官方的範例程式皆在 c:\tmp\DataTables-1.8.2\examples資料夾裡
- 在瀏覽器輸入「file:///c:/tmp/DataTables-1.8.2/examples/basic_init/zero_config.html」就能看到最基本的DataTables樣貌。這個範例是不傳選項，全部以預設值來處理。
- 拷貝c:\tmp\DataTables-1.8.2\examples\basic_init\zero_config.html為full_numbers.html，再編輯full_numbers.html就能自行做測試。將第16行修改如下：
|
|
$('#example').dataTable({ "sPaginationType":"full_numbers","bPaginate":true, "oLanguage": { "sLengthMenu": "顯示 _MENU_ 筆記錄", "sZeroRecords": "無符合資料", "sInfo": "目前記錄：_START_ 至 _END_, 總筆數：_TOTAL_", } |
瀏覽結果如下：
***********************************************************************************************************************************************************
出處：http://hi.baidu.com/suyuwen1/blog/item/7da7648176df1ff8bd3e1e6a.html
jQuery的DataTables插件的使用方法
在做後台的時候並沒有美工和前端工程師來配合你做頁面，為了顯示數據並有一定的美感，我們可以使用jQuery的DataTables插件來幫助我們完成任務
1、DataTables的默認配置
$(document).ready(function() {
$(『#example』).dataTable();
} );
示例：http://www.guoxk.com/html/DataTables/Zero-configuration.html
2、DataTables的一些基礎屬性配置
「bPaginate」: true, //翻頁功能
「bLengthChange」: true, //改變每頁顯示數據數量
「bFilter」: true, //過濾功能
「bSort」: false, //排序功能
「bInfo」: true,//頁腳信息
「bAutoWidth」: true//自動寬度
示例：http://www.guoxk.com/html/DataTables/Feature-enablement.html
3、數據排序
$(document).ready(function() {
$(『#example』).dataTable( {
「aaSorting」: [
[ 4, "desc" ]
]
} );
} );
從第0列開始，以第4列倒序排列
示例：http://www.guoxk.com/html/DataTables/Sorting-data.html
4、多列排序
示例：http://www.guoxk.com/html/DataTables/Multi-column-sorting.html
5、隱藏某些列
$(document).ready(function() {
$(『#example』).dataTable( {
「aoColumnDefs」: [
{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] },
{ 「bVisible」: false, 「aTargets」: [ 3 ] }
] } );
} );
示例：http://www.guoxk.com/html/DataTables/Hidden-columns.html
6、改變頁面上元素的位置
$(document).ready(function() {
$(『#example』).dataTable( {
「sDom」: 『<」top」fli>rt<」bottom」p><」clear」>』
} );
} );
//l- 每頁顯示數量
//f – 過濾輸入
//t – 表單Table
//i – 信息
//p – 翻頁
//r – pRocessing
//< and > – div elements
//<」class」 and > – div with a class
//Examples: <」wrapper」flipt>, <lf<t>ip>
示例：http://www.guoxk.com/html/DataTables/DOM-positioning.html
7、狀態保存，使用了翻頁或者改變了每頁顯示數據數量，會保存在cookie中，下回訪問時會顯示上一次關閉頁面時的內容。
$(document).ready(function() {
$(『#example』).dataTable( {
「bStateSave」: true
} );
} );
示例：http://www.guoxk.com/html/DataTables/State-saving.html
8、顯示數字的翻頁樣式
$(document).ready(function() {
$(『#example』).dataTable( {
「sPaginationType」: 「full_numbers」
} );
} );
示例：http://www.guoxk.com/html/DataTables/Alternative-pagination-styles.html
9、水平限制寬度
$(document).ready(function() {
$(『#example』).dataTable( {
「sScrollX」: 「100%」,
「sScrollXInner」: 「110%」,
「bScrollCollapse」: true
} );
} );
示例：http://www.guoxk.com/html/DataTables/Horizontal.html
10、垂直限制高度
示例：http://www.guoxk.com/html/DataTables/Vertical.html
11、水平和垂直兩個方向共同限制
示例：http://www.guoxk.com/html/DataTables/HorizontalVerticalBoth.html
12、改變語言
$(document).ready(function() {
$(『#example』).dataTable( {
「oLanguage」: {
「sLengthMenu」: 「每頁顯示 _MENU_ 條記錄」,
「sZeroRecords」: 「抱歉， 沒有找到」,
「sInfo」: 「從 _START_ 到 _END_ /共 _TOTAL_ 條數據」,
「sInfoEmpty」: 「沒有數據」,
「sInfoFiltered」: 「(從 _MAX_ 條數據中檢索)」,
「oPaginate」: {
「sFirst」: 「首頁」,
「sPrevious」: 「前一頁」,
「sNext」: 「後一頁」,
「sLast」: 「尾頁」
},
「sZeroRecords」: 「沒有檢索到數據」,
「sProcessing」: 「<img src=』./loading.gif』 />」
}
} );
} );
示例：http://www.guoxk.com/html/DataTables/Change-language-information.html
13、click事件
示例：http://www.guoxk.com/html/DataTables/event-click.html
14/配合使用tooltip插件
示例：http://www.guoxk.com/html/DataTables/tooltip.html
15、定義每頁顯示數據數量
$(document).ready(function() {
$(『#example』).dataTable( {
「aLengthMenu」: [[10, 25, 50, -1], [10, 25, 50, "All"]]
} );
} );
示例：http://www.guoxk.com/html/DataTables/length_menu.html
16、row callback
示例：http://www.guoxk.com/html/DataTables/RowCallback.html
最後一列的值如果為「A」則加粗顯示
17、排序控制
$(document).ready(function() {
$(『#example』).dataTable( {
「aoColumns」: [
null,
{ "asSorting": [ "asc" ] },
{ 「asSorting」: [ "desc", "asc", "asc" ] },
{ 「asSorting」: [ ] },
{ 「asSorting」: [ ] }
]
} );
} );
示例：http://www.guoxk.com/html/DataTables/sort.html
說明：第一列點擊按默認情況排序，第二列點擊已順序排列，第三列點擊一次倒序，二三次順序，第四五列點擊不實現排序
18、從配置文件中讀取語言包
$(document).ready(function() {
$(『#example』).dataTable( {
「oLanguage」: {
「sUrl」: 「cn.txt」
}
} );
} );
19、是用ajax源
$(document).ready(function() {
$(『#example』).dataTable( {
「bProcessing」: true,
「sAjaxSource」: 『./arrays.txt』
} );
} );
示例：http://www.guoxk.com/html/DataTables/ajax.html
20、使用ajax，在服務器端整理數據
$(document).ready(function() {
$(『#example』).dataTable( {
「bProcessing」: true,
「bServerSide」: true,
「sPaginationType」: 「full_numbers」,
「sAjaxSource」: 「./server_processing.php」,
/*如果加上下面這段內容，則使用post方式傳遞數據
「fnServerData」: function ( sSource, aoData, fnCallback ) {
$.ajax( {
「dataType」: 『json』,
「type」: 「POST」,
「url」: sSource,
「data」: aoData,
「success」: fnCallback
} );
}*/
「oLanguage」: {
「sUrl」: 「cn.txt」
},
「aoColumns」: [
{ "sName": "platform" },
{ "sName": "version" },
{ "sName": "engine" },
{ "sName": "browser" },
{ "sName": "grade" }
]//$_GET['sColumns']將接收到aoColumns傳遞數據
} );
} );
示例：http://www.guoxk.com/html/DataTables/ajax-serverSide.html
21、為每行加載id和class
服務器端返回數據的格式：
{
「DT_RowId」: 「row_8〞,
「DT_RowClass」: 「gradeA」,
「0〞: 「Gecko」,
「1〞: 「Firefox 1.5〞,
「2〞: 「Win 98+ / OSX.2+」,
「3〞: 「1.8〞,
「4〞: 「A」
},
示例：http://www.guoxk.com/html/DataTables/add_id_class.html
22、為每行顯示細節，點擊行開頭的「+」號展開細節顯示
示例：http://www.guoxk.com/html/DataTables/with-row-information.html
23、選擇多行
示例：http://www.guoxk.com/html/DataTables/selectRows.html
22、集成jQuery插件jEditable
示例：http://www.guoxk.com/html/DataTables/jEditable-integration.html
示例打包下載：http://www.guoxk.com/html/DataTables/DataTables.rar
