jQuery.datatables.js插件用法及api實(shí)例詳解
1、DataTables的默認(rèn)配置
$(document).ready(function() {
$(‘#example').dataTable();
} );
示例:http://www.guoxk.com/html/DataTables/Zero-configuration.html
2、DataTables的一些基礎(chǔ)屬性配置
“bPaginate”: true, //翻頁(yè)功能
“bLengthChange”: true, //改變每頁(yè)顯示數(shù)據(jù)數(shù)量
“bFilter”: true, //過濾功能
“bSort”: false, //排序功能
“bInfo”: true,//頁(yè)腳信息
“bAutoWidth”: true//自動(dòng)寬度

示例:http://www.guoxk.com/html/DataTables/Feature-enablement.html
3、數(shù)據(jù)排序
$(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、改變頁(yè)面上元素的位置
$(document).ready(function() {
$(‘#example').dataTable( {
“sDom”: ‘<”top”fli>rt<”bottom”p><”clear”>'
} );
} );
//l- 每頁(yè)顯示數(shù)量
//f – 過濾輸入
//t – 表單Table
//i – 信息
//p – 翻頁(yè)
//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)保存,使用了翻頁(yè)或者改變了每頁(yè)顯示數(shù)據(jù)數(shù)量,會(huì)保存在cookie中,下回訪問時(shí)會(huì)顯示上一次關(guān)閉頁(yè)面時(shí)的內(nèi)容。
$(document).ready(function() {
$(‘#example').dataTable( {
“bStateSave”: true
} );
} );
示例:http://www.guoxk.com/html/DataTables/State-saving.html
8、顯示數(shù)字的翻頁(yè)樣式
$(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、水平和垂直兩個(gè)方向共同限制
示例:http://www.guoxk.com/html/DataTables/HorizontalVerticalBoth.html
12、改變語(yǔ)言
$(document).ready(function() {
$(‘#example').dataTable( {
“oLanguage”: {
“sLengthMenu”: “每頁(yè)顯示 _MENU_ 條記錄”,
“sZeroRecords”: “抱歉, 沒有找到”,
“sInfo”: “從 _START_ 到 _END_ /共 _TOTAL_ 條數(shù)據(jù)”,
“sInfoEmpty”: “沒有數(shù)據(jù)”,
“sInfoFiltered”: “(從 _MAX_ 條數(shù)據(jù)中檢索)”,
“oPaginate”: {
“sFirst”: “首頁(yè)”,
“sPrevious”: “前一頁(yè)”,
“sNext”: “后一頁(yè)”,
“sLast”: “尾頁(yè)”
},
“sZeroRecords”: “沒有檢索到數(shù)據(jù)”,
“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、定義每頁(yè)顯示數(shù)據(jù)數(shù)量
$(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
說(shuō)明:第一列點(diǎn)擊按默認(rèn)情況排序,第二列點(diǎn)擊已順序排列,第三列點(diǎn)擊一次倒序,二三次順序,第四五列點(diǎn)擊不實(shí)現(xiàn)排序
18、從配置文件中讀取語(yǔ)言包
$(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,在服務(wù)器端整理數(shù)據(jù)
$(document).ready(function() {
$(‘#example').dataTable( {
“bProcessing”: true,
“bServerSide”: true,
“sPaginationType”: “full_numbers”,
“sAjaxSource”: “./server_processing.php”,
/*如果加上下面這段內(nèi)容,則使用post方式傳遞數(shù)據(jù)
“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傳遞數(shù)據(jù)
} );
} );
示例:http://www.guoxk.com/html/DataTables/ajax-serverSide.html
21、為每行加載id和class
服務(wù)器端返回?cái)?shù)據(jù)的格式:
{
“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、為每行顯示細(xì)節(jié),點(diǎn)擊行開頭的“+”號(hào)展開細(xì)節(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對(duì)象,必須有thead與tbody,而且,結(jié)構(gòu)要規(guī)整(數(shù)據(jù)不一定要完整),這樣才能正確處理。
以下是在進(jìn)行dataTable綁定處理時(shí)候可以附加的參數(shù):




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

