datatables使用

//四、多列排序

//示例：http://www.guoxk.com/html/DataTables/Multi-column-sorting.html

//五、隱藏某些列

$(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

//六、改變頁面上元素的位置

$(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

//七、狀態保存，使用了翻頁或者改變了每頁顯示數據數量，會保存在cookie中，下回訪問時會顯示上一次關閉頁面時的內容。

$(document).ready( function () {

$( '#example' ).dataTable( {

"bStateSave" :  true

} );

} );

//示例：http://www.guoxk.com/html/DataTables/State-saving.html

//八、顯示數字的翻頁樣式

$(document).ready( function () {

$( '#example' ).dataTable( {

"sPaginationType" :  "full_numbers"

} );

} );

//示例：http://www.guoxk.com/html/DataTables/Alternative-pagination-styles.html

//九、水平限制寬度

$(document).ready( function () {

$( '#example' ).dataTable( {

"sScrollX" :  "100%" ,

"sScrollXInner" :  "110%" ,

"bScrollCollapse" :  true

} );

} );

//示例：http://www.guoxk.com/html/DataTables/Horizontal.html

//十、垂直限制高度

//示例：http://www.guoxk.com/html/DataTables/Vertical.html

//十一、水平和垂直兩個方向共同限制

//示例：http://www.guoxk.com/html/DataTables/HorizontalVerticalBoth.html

//十二、改變語言

$(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

//1三、click事件

//示例：http://www.guoxk.com/html/DataTables/event-click.html

//14/配合使用tooltip插件

//示例：http://www.guoxk.com/html/DataTables/tooltip.html

//1五、定義每頁顯示數據數量

$(document).ready( function () {

$( '#example' ).dataTable( {

"aLengthMenu" : [[10, 25, 50, -1], [10, 25, 50,  "All" ]]

} );

} );

//示例：http://www.guoxk.com/html/DataTables/length_menu.html