[轉貼] jQuery DataTables範例

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顯示出一個很專業的資料表格。以下是測試環境建置的步驟：

1. 由DataTables下載網址將最新版的v1.8.2壓縮檔存入硬碟
2. 解壓縮到c:\tmp，官方的範例程式皆在 c:\tmp\DataTables-1.8.2\examples資料夾裡
3. 在瀏覽器輸入「file:///c:/tmp/DataTables-1.8.2/examples/basic_init/zero_config.html」就能看到最基本的DataTables樣貌。這個範例是不傳選項，全部以預設值來處理。

1. 拷貝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