jQuery.datatables.js插件用法及api實例詳解
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、狀態(tài)保存,使用了翻頁或者改變了每頁顯示數據數量,會保存在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、為每行顯示細節(jié),點擊行開頭的“+”號展開細節(jié)顯示
示例: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
更過參考:
要注意的是,要被dataTable處理的table對象,必須有thead與tbody,而且,結構要規(guī)整(數據不一定要完整),這樣才能正確處理。
以下是在進行dataTable綁定處理時候可以附加的參數:




以上所述是小編給大家介紹的jQuery.datatables.js插件用法及api實例詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
- Jquery Datatables的使用詳解
- jQuery Datatables 動態(tài)列+跨列合并實現代碼
- jQuery Datatables表頭不對齊的解決辦法
- jQuery插件DataTables分頁開發(fā)心得體會
- JQuery.dataTables表格插件添加跳轉到指定頁
- jQuery中Datatables增加跳轉到指定頁功能
- 利用JQuery實現datatables插件的增加和刪除行功能
- jQuery DataTables插件自定義Ajax分頁實例解析
- jQuery插件datatables使用教程
- jQuery表格插件datatables用法匯總
- Jquery dataTables.treeGrid的樹形插件使用
相關文章
40個有創(chuàng)意的jQuery圖片和內容滑動及彈出插件收藏集之三
在網頁的首頁或圖片專題頁面很多地方都會用到圖片滑動插件來循環(huán)切換多張圖片,并且用戶可以點擊左右按鈕來切換圖片。2012-01-01
深入理解JQuery keyUp和keyDown的區(qū)別
這篇文章主要是對JQuery中keyUp與keyDown的區(qū)別進行了詳細的分析介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12
淺析jQuery中調用ajax方法時在不同瀏覽器中遇到的問題
這篇文章主要介紹了jQuery中調用ajax方法時在不同瀏覽器中遇到的問題,因不同瀏覽器默認設置的不同造成的問題2014-06-06
AJAX實現瀑布流觸發(fā)分頁與分頁觸發(fā)瀑布流的方法
瀑布流觸發(fā)分頁可以理解為微博中的瀏覽效果、到一定程度時顯示頁數進行分頁,而分頁觸發(fā)瀑布流可以理解為Twitter拉到一頁設定的最大條數后繼續(xù)用瀑布流展示下一頁,接下來我們就來詳細看看AJAX實現瀑布流觸發(fā)分頁與分頁觸發(fā)瀑布流的方法2016-05-05

