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延迟加载
Mar 09 Javascript
新手常遇到的一些jquery问题整理
Aug 16 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
Oct 11 Javascript
基于jquery实现省市联动特效
Dec 17 Javascript
js倒计时简单实现方法
Dec 17 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
Mar 23 Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 Javascript
微信小程序 生命周期详解
Oct 12 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
Mar 03 Javascript
Vue的elementUI实现自定义主题方法
Feb 23 Javascript
JS实现马赛克图片效果完整示例
Apr 13 Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 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生成html分页列表的代码
2007/03/18 PHP
php中session_unset与session_destroy的区别分析
2011/06/16 PHP
求PHP数组最大值,最小值的代码
2011/10/31 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
php 静态属性和静态方法区别详解
2017/04/09 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
2013/01/24 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
2015/11/21 Javascript
AngularJS向后端ASP.NET API控制器上传文件
2016/02/03 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
使用 stylelint检查CSS_StyleLint
2016/04/28 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
Node.js笔记之process模块解读
2018/05/31 Javascript
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
微信小程序代码上传、审核发布小程序
2019/05/18 Javascript
利用不到200行代码写一款属于你自己的js类库
2019/07/08 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
对Python的Django框架中的项目进行单元测试的方法
2016/04/11 Python
Python3调用百度AI识别图片中的文字功能示例【测试可用】
2019/03/13 Python
Flask配置Cors跨域的实现
2019/07/12 Python
Python IDLE或shell中切换路径的操作
2020/03/09 Python
利用python 读写csv文件
2020/09/10 Python
Hudson Jeans官网:高级精制牛仔裤
2018/11/28 全球购物
在子网210.27.48.21/30种有多少个可用地址?分别是什么?
2014/07/27 面试题
高中政治教学反思
2014/01/18 职场文书
员工晚婚的请假条
2014/02/08 职场文书
公益广告宣传方案
2014/02/28 职场文书
大学本科生职业生涯规划书范文
2014/09/14 职场文书
学校捐书活动总结
2015/05/08 职场文书
《詹天佑》教学反思
2016/02/20 职场文书
祝福语集锦:送给毕业同学祝福语
2019/11/21 职场文书
浅谈mysql执行过程以及顺序
2021/05/12 MySQL