jQuery.datatables.js插件用法及api实例详解
1、DataTables的默认配置
rush:js;">
$(document).ready(function() {
$(‘#example').dataTable();
} );
示例:
2、DataTables的一些基础属性配置
“bPaginate”: true,//翻页功能
“bLengthChange”: true,//改变每页显示数据数量
“bFilter”: true,//过滤功能
“bSort”: false,//排序功能
“bInfo”: true,//页脚信息
“bAutoWidth”: true//自动宽度
示例:
3、数据排序
rush:js;">
$(document).ready(function() {
$(‘#example').dataTable( {
“aaSorting”: [
[ 4,"desc" ]
]
} );
} );
从第0列开始,以第4列倒序排列
示例:
4、多列排序
示例:
5、隐藏某些列
rush:js;">
$(document).ready(function() {
$(‘#example').dataTable( {
“aoColumnDefs”: [
{ "bSearchable": false,"bVisible": false,"aTargets": [ 2 ] },{ “bVisible”: false,“aTargets”: [ 3 ] }
] } );
} );
示例:
6、改变页面上元素的位置
rt<”bottom”p><”clear”>'
} );
} );
//l- 每页显示数量
//f – 过滤输入
//t – 表单Table
//i – 信息
//p – 翻页
//r – pRocessing
//< and > – div elements
//<”class” and > – div with a class
//Examples: <”wrapper”flipt>,ip>
示例:
7、状态保存,使用了翻页或者改变了每页显示数据数量,会保存在cookie中,下回访问时会显示上一次关闭页面时的内容。
rush:js;">
$(document).ready(function() {
$(‘#example').dataTable( {
“bStateSave”: true
} );
} );
示例:
8、显示数字的翻页样式
示例:
9、水平限制宽度
rush:js;">
$(document).ready(function() {
$(‘#example').dataTable( {
“sScrollX”: “100%”,“sScrollXInner”: “110%”,“bScrollCollapse”: true
} );
} );
示例:
10、垂直限制高度
示例:
11、水平和垂直两个方向共同限制
示例:
12、改变语言
”
}
} );
} );
示例:
13、click事件
示例:
14/配合使用tooltip插件
示例:
15、定义每页显示数据数量
rush:js;">
$(document).ready(function() {
$(‘#example').dataTable( {
“aLengthMenu”: [[10,25,50,-1],[10,"All"]]
} );
} );
示例:
16、row callback
示例:
最后一列的值如果为“A”则加粗显示
17、排序控制
rush:js;">
$(document).ready(function() {
$(‘#example').dataTable( {
“aoColumns”: [
null,{ "asSorting": [ "asc" ] },{ “asSorting”: [ "desc","asc","asc" ] },{ “asSorting”: [ ] },{ “asSorting”: [ ] }
]
} );
} );
示例:
说明:第一列点击按默认情况排序,第二列点击已顺序排列,第三列点击一次倒序,二三次顺序,第四五列点击不实现排序
18、从配置文件中读取语言包
19、是用ajax源
示例:
20、使用ajax,在服务器端整理数据
rush:js;">
$(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传递数据
} );
} );
示例:
21、为每行加载id和class
服务器端返回数据的格式:
示例:
22、为每行显示细节,点击行开头的“+”号展开细节显示
示例:
23、选择多行
示例:
22、集成jQuery插件jEditable
示例:
更过参考:
要注意的是,要被dataTable处理的table对象,必须有thead与tbody,而且,结构要规整(数据不一定要完整),这样才能正确处理。
以下是在进行dataTable绑定处理时候可以附加的参数:
以上所述是小编给大家介绍的jQuery.datatables.js插件用法及api实例详解。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。
原文地址:https://www.jb51.cc/jquery/44802.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。