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 相关文章推荐
一个很简单的办法实现TD的加亮效果.
Jun 29 Javascript
csdn 博客中实现运行代码功能实现
Aug 29 Javascript
setTimeout与setInterval在不同浏览器下的差异
Jan 24 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
jQuery动态背景图片效果实现方法
Jul 03 Javascript
jQuery.prop() 使用详解
Jul 19 Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
May 21 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
Mar 07 Javascript
p5.js入门教程之图片加载
Mar 20 Javascript
史上最为详细的javascript继承(推荐)
May 18 Javascript
antd 表格列宽自适应方法以及错误处理操作
Oct 27 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
漫威DC御用漫画家去世 他的表情包曾走红网络
2020/04/09 欧美动漫
采集邮箱的php代码(抓取网页中的邮箱地址)
2012/07/17 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
JavaScript入门教程(12) js对象化编程
2009/01/31 Javascript
js中的window.open返回object的错误的解决方法
2009/08/15 Javascript
javascript 随机展示头像实现代码
2011/12/06 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
2014/06/05 Javascript
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
JavaScript使用indexOf获得子字符串在字符串中位置的方法
2015/04/06 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
2016/09/08 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
2016/10/26 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
2017/01/19 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
2017/02/22 Javascript
vue2.0实战之基础入门(1)
2017/03/27 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
2017/09/14 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
vue-router的两种模式的区别
2019/05/30 Javascript
js+cavans实现图片滑块验证
2020/09/29 Javascript
python实现简单的计时器功能函数
2015/03/14 Python
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
ML神器:sklearn的快速使用及入门
2019/07/11 Python
django 使用 PIL 压缩图片的例子
2019/08/16 Python
pytorch获取模型某一层参数名及参数值方式
2019/12/30 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
世界经理人咨询有限公司面试
2014/09/23 面试题
开学典礼决心书
2014/03/11 职场文书
航空学院求职信
2014/06/11 职场文书
企业安全生产月活动总结
2014/07/05 职场文书
工伤调解协议书
2016/03/21 职场文书
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python