文档章节

DataTables_详细使用方法

喵王不瞌睡
 喵王不瞌睡
发布于 2015/05/02 20:26
字数 943
阅读 2742
收藏 13

jQuery的DataTables插件的使用方法

ADMIN 2011年11月23日 13:15:45 发布

在做后台的时候并没有美工和前端工程师来配合你做页面,为了显示数据并有一定的美感,我们可以使用jQuery的DataTables插件来帮助我们完成任务

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

示例: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

23、选择多行

示例:http://www.guoxk.com/html/DataTables/selectRows.html

22、集成jQuery插件jEditable

示例:http://www.guoxk.com/html/DataTables/jEditable-integration.html

 

 

示例打包下载:http://www.guoxk.com/html/DataTables/DataTables.rar

本文转载自:http://www.guoxk.com/node/jquery-datatables#comment-10170

喵王不瞌睡
粉丝 11
博文 168
码字总数 51103
作品 0
浦东
个人站长
私信 提问
加载中

评论(1)

dandyIder
dandyIder
收藏
Datatables快速入门开发--一款好用的JQuery表格插件

  博主是一个java后端程序员,前端技术会用但不精通,做后台的一些功能经常要涉及表格的展示,分页,搜索,排序等等一系列功能,在经历了一段时间的原始手段,开始接触并使用Datatables,一个jquer...

冬至饮雪
2017/08/04
0
0
jQuery的DataTables插件的使用方法

一:官方网站:http://www.datatables.net/ 二:基本使用:http://www.guoxk.com/node/jquery-datatables 1、DataTables的默认配置 $(document).ready(function() { $('#example').dataTable......

星痕2018
2013/03/01
817
0
dataTables-使用详细说明整理

本文共四部分:官网 | 基本使用|遇到的问题|属性表 一:官方网站:[http://www.datatables.NET/] 二:基本使用:[http://www.guoxk.com/node/jQuery-datatables] 1、DataTables的默认配置 $(...

ahl123
2018/07/02
0
0
DataTables能实现移动端的下拉加载吗?可以,需要借助一下Scroller插件

版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/82287523 一、 通常情况下,DataTables(Datatables是一款具有高级交互功能的jQuery表格插件)只...

qing_gee
2018/09/01
0
0
Datatables + Bootstrap 组合基础示例 2

前言 示例 1 请见[上一篇博文][1]。 示例 2 Datatables 插件使用 Bootstrap 框架的组合示例。 功能 分页 / 排序 / 过滤 / json 数据源 / 数据导出 (需 flash 支持) / 自定义列 / 自定义分页选...

星塵子
2013/05/05
5K
1

没有更多内容

加载失败,请刷新页面

加载更多

Kafka 原理和实战

本文首发于 vivo互联网技术 微信公众号 https://mp.weixin.qq.com/s/bV8AhqAjQp4a_iXRfobkCQ 作者简介:郑志彬,毕业于华南理工大学计算机科学与技术(双语班)。先后从事过电子商务、开放平...

vivo互联网技术
今天
17
0
java数据类型

基本类型: 整型:Byte,short,int,long 浮点型:float,double 字符型:char 布尔型:boolean 引用类型: 类类型: 接口类型: 数组类型: Byte 1字节 八位 -128 -------- 127 short 2字节...

audience_1
今天
9
0
太全了|万字详解Docker架构原理、功能及使用

一、简介 1、了解Docker的前生LXC LXC为Linux Container的简写。可以提供轻量级的虚拟化,以便隔离进程和资源,而且不需要提供指令解释机制以及全虚拟化的其他复杂性。相当于C++中的NameSpa...

Java技术剑
今天
21
0
Wifiphisher —— 非常非常非常流氓的 WIFI 网络钓鱼框架

编者注:这是一个非常流氓的 WIFI 网络钓鱼工具,甚至可能是非法的工具(取决于你的使用场景)。在没有事先获得许可的情况下使用 Wifiphisher 攻击基础网络设施将被视为非法活动。使用时请遵...

红薯
今天
90
1
MongoDB 4 on CentOS 7安装指南

本教程为CentOS x86_64 7.x操作系统下,MongoDB Community x86_64 4.2(GA)安装指南。 安装方式一:yum repo在线安装 [此方式较为简单,官方推荐] Step1:新建MongDB社区版Yum镜像源。 # vim ...

王焱君
今天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部