欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery.datatables.js插件用法及api實例詳解

 更新時間：2016年10月28日 10:24:32   作者：墨韻明空  
這篇文章主要介紹了jquery插件之jQuery.datatables.js用法及api實例詳解,本文給大家介紹的非常詳細具有參考借鑒價值，需要的朋友可以參考下

1、DataTables的默認配置

$(document).ready(function() {
$(‘#example').dataTable();
} );

示例：http://www.guoxk.com/html/DataTables/Zero-configuration.html

2、DataTables的一些基礎(chǔ)屬性配置

“bPaginate”: true, //翻頁功能
“bLengthChange”: true, //改變每頁顯示數(shù)據(jù)數(shù)量
“bFilter”: true, //過濾功能
“bSort”: false, //排序功能
“bInfo”: true,//頁腳信息
“bAutoWidth”: true//自動寬度

示例：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、改變頁面上元素的位置

$(document).ready(function() {
$(‘#example').dataTable( {
“sDom”: ‘<”top”fli>rt<”bottom”p><”clear”>'
} );
} );
//l- 每頁顯示數(shù)量
//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)保存，使用了翻頁或者改變了每頁顯示數(shù)據(jù)數(shù)量，會保存在cookie中，下回訪問時會顯示上一次關(guān)閉頁面時的內(nèi)容。

$(document).ready(function() {
$(‘#example').dataTable( {
“bStateSave”: true
} );
} );

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

8、顯示數(shù)字的翻頁樣式

$(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_ 條數(shù)據(jù)”,
“sInfoEmpty”: “沒有數(shù)據(jù)”,
“sInfoFiltered”: “(從 _MAX_ 條數(shù)據(jù)中檢索)”,
“oPaginate”: {
“sFirst”: “首頁”,
“sPrevious”: “前一頁”,
“sNext”: “后一頁”,
“sLast”: “尾頁”
},
“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、定義每頁顯示數(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

說明：第一列點擊按默認情況排序，第二列點擊已順序排列，第三列點擊一次倒序，二三次順序，第四五列點擊不實現(xiàn)排序

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，在服務(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ù)器端返回數(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、為每行顯示細節(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，而且，結(jié)構(gòu)要規(guī)整（數(shù)據(jù)不一定要完整），這樣才能正確處理。

以下是在進行dataTable綁定處理時候可以附加的參數(shù)：

以上所述是小編給大家介紹的jQuery.datatables.js插件用法及api實例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評論