jQuery.datatables.js插件用法及api实例详解


Posted in Javascript onOctober 28, 2016

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//自动宽度

jQuery.datatables.js插件用法及api实例详解

示例: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、状态保存,使用了翻页或者改变了每页显示数据数量,会保存在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、为每行显示细节,点击行开头的“+”号展开细节显示

示例:http://www.guoxk.com/html/DataTables/with-row-information.html

jQuery.datatables.js插件用法及api实例详解

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,而且,结构要规整(数据不一定要完整),这样才能正确处理。

以下是在进行dataTable绑定处理时候可以附加的参数:

jQuery.datatables.js插件用法及api实例详解

jQuery.datatables.js插件用法及api实例详解

jQuery.datatables.js插件用法及api实例详解

jQuery.datatables.js插件用法及api实例详解

以上所述是小编给大家介绍的jQuery.datatables.js插件用法及api实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript获取选中的文本的方法代码
Oct 30 Javascript
javascript获取ckeditor编辑器的值(实现代码)
Nov 18 Javascript
转换字符串为json对象的方法详解
Nov 29 Javascript
js清空表单数据的两种方式(遍历+reset)
Jul 18 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
Aug 17 Javascript
js实现表单多按钮提交action的处理方法
Oct 24 Javascript
JS使用eval()动态创建变量的方法
Jun 03 Javascript
Cpage.js给组件绑定事件的实现代码
Aug 31 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
Mar 01 Javascript
mock.js实现模拟生成假数据功能示例
Jan 15 Javascript
JS获取当前时间戳方法解析
Aug 29 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 #Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 #Javascript
js基础之DOM中document对象的常用属性方法详解
Oct 28 #Javascript
Javascript+CSS3实现进度条效果
Oct 28 #Javascript
js基础之DOM中元素对象的属性方法详解
Oct 28 #Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
Oct 28 #Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
Oct 28 #Javascript
You might like
PHP 第二节 数据类型之转换
2012/04/28 PHP
PHP防止注入攻击实例分析
2014/11/03 PHP
使用PHP编写发红包程序
2015/07/22 PHP
PHP中类的继承和用法实例分析
2016/05/24 PHP
php微信公众号js-sdk开发应用
2016/11/28 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
小程序微信退款功能实现方法详解【基于thinkPHP】
2019/05/05 PHP
js Event对象的5种坐标
2011/09/12 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
JS实现三个层重叠点击互相切换的方法
2015/10/06 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
2015/10/22 Javascript
jquery中checkbox使用方法简单实例演示
2015/11/24 Javascript
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
jquery 仿锚点跳转到页面指定位置的实例
2017/02/14 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
JS异步执行结果获取的3种解决方式
2019/02/19 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
js模拟F11页面全屏显示
2019/09/17 Javascript
ES6之Proxy的get方法详解
2019/10/11 Javascript
js实现课堂随机点名系统
2019/11/21 Javascript
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
2020/04/09 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
python实现kmp算法的实例代码
2019/04/03 Python
Python的赋值、深拷贝与浅拷贝的区别详解
2020/02/12 Python
从0到1使用python开发一个半自动答题小程序的实现
2020/05/12 Python
Python函数的迭代器与生成器的示例代码
2020/06/18 Python
英国最大的独立摄影零售商:Park Cameras
2019/11/27 全球购物
公司爱心捐款倡议书
2014/05/14 职场文书
幼儿生日活动方案
2014/08/27 职场文书
陈斌强事迹观后感
2015/06/17 职场文书
中秋节祝酒词
2015/08/12 职场文书
Python办公自动化解决world文件批量转换
2021/09/15 Python
详解Python中__new__方法的作用
2022/03/31 Python