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實例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
- Spring Data Jpa+SpringMVC+Jquery.pagination.js實現分頁示例
- jQuery購物車插件jsorder用法(支持后臺處理程序直接轉換成DataTable處理)
- jQuery ajax dataType值為text json探索分享
- 當自定義數據屬性為json格式字符串時jQuery的data api問題探討
- Python requests.post方法中data與json參數區(qū)別詳解
- JS中FormData類實現文件上傳
- thinkphp5 + ajax 使用formdata提交數據（包括文件上傳） 后臺返回json完整實例
- JS JQuery獲取data-*屬性值方法解析
相關文章
jQuery參數列表集合，學習jquery的朋友可以收藏下。2011-04-04
JQuery擴展插件Validate 2通過參數設置驗證規(guī)則
在前面示例中使用的的方法簡單方便，但沒有完全將js與頁面結構完全分離，也就是說js依賴了class,下面通過validate()方法的參數設置驗證規(guī)則將js與頁面結構完全分離2011-09-09
jQuery中與toggleClass等價的程序段 以及未來學習的方向
昨天開始學jQuery，js是我前端設計技術的一塊心病，一直沒有找到很好的學習辦法。最近突然開悟，可以學jQuery呀，這個東西比較好學。2010-03-03
jQuery 是一個快速、簡單的JavaScript library， 它簡化了HTML 文件的traversing，事件處理、動畫、Ajax 互動，從而方便了網頁制作的快速發(fā)展。 jQuery 是為改變你編寫JavaScript 的方式而設計的，本文給大家分享jquery validate初步體驗(一)，感興趣的朋友一起學習吧2015-12-12
原生Ajax 和jQuery Ajax的區(qū)別示例分析
這篇文章主要介紹了原生Ajax 和Jq Ajax的區(qū)別示例分析,需要的朋友可以參考下2014-12-12
jQuery入門 構造函數，需要的朋友可以參考下。2009-10-10
本文主要對jQuery的extend方法的用法做了簡要闡述，具有一定的參考價值，需要的朋友可以參考借鑒2016-12-12
這篇文章主要為大家詳細介紹了jQuery實時統計輸入框字數及限制，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
jQuery插件FusionCharts繪制的2D條狀圖效果【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制的2D條狀圖效果,結合完整實例形式分析了jQuery使用FusionCharts插件繪制2D條狀圖的具體步驟與相關操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了基于jQuery Tipso插件實現消息提示框特效，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03