jQuery Datetable
先来个官网可以直接看官网 https://www.datatables.net/manual/data/
安装
DataTables是一个功能强大的Javascript库,用于为HTML表格添加交互功能,而简单性作为整个项目的核心设计原则,开始看起来相当艰巨。但是,采取这些步骤并获取DataTables在您的网站上运行实际上是非常简单的,因为您只需要在页面中添加两个文件:
- DataTables JavaScript文件
- DataTables CSS文件
还有其他的文件可用,例如添加编辑功能的编辑器,以及其他插件,可用于扩展DataTables的功能集,但基本上,只需要包含这两个文件即可启动并运行!
要求
在我们开始之前,我们需要考虑数据表的要求以便操作。
依赖
DataTables只有一个库依赖项(依赖它的工作所依赖的其他软件) - jQuery。作为一个jQuery插件,DataTables利用jQuery提供的许多优秀特性,并像所有其他jQuery插件一样挂载到jQuery插件系统中。jQuery 1.7或更高版本将与DataTables一起使用,但通常您会希望使用最新版本。DataTables包括它需要操作的一切。
HTML
为了DataTable能够增强HTML表格,表格必须是有效的,格式良好的HTML,带有header(thead
)和单个主体(tbody
)。可选的页脚(tfoot
)也可以使用。
<table id="table_id" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
如果您使用服务器端程序(如PHP脚本,Ruby脚本,C#程序或其他任何东西)生成HTML文档,则只需要输出您的表格即可。这正是你正常的HTML表格,尽管有时你可能需要添加thead
和tbody
标签,因为这些并不总是被使用(它们允许DataTables知道应该使用什么列标题和点击顺序控制)。
请注意,如果您正在使用Ajax源数据,DataTables实际上可以为您生成thead
和tbody
为您,以及表的所有行和单元格,但目前我们将专注于纯HTML。有关DataTables可以使用的不同数据源的更多信息,请参阅本手册的数据源部分。
安装Javascript / CSS
初始化DataTables
$(document).ready( function () {
$('#table_id').DataTable();
} );
DataTables会默认添加排序,搜索,分页和信息到您的表格,使最终用户能够尽快找到他们想要的信息。
如果要定制DataTable,可以通过在传递给DataTable()
函数的对象中指定配置参数来完成。有关如何使用这些配置参数的信息,请参阅选项手册页。
数据
DataTables如何处理数据有三个核心概念:
- 处理模式
- 数据类型
- 数据源
处理模式
Data Tables 有两种不同的数据处理方式(排序,搜索等):
- 客户端处理: 完整的数据集预先加载,数据处理在浏览器中完成
- 服务器端处理: 为每个表格重绘一个Ajax请求,只返回每个显示所需的数据。数据处理在服务器上执行。
每种方法都有各自的优点和缺点,但您应该选择哪种模式的关键指标是基于表中的行数。作为一个经验法则,如果使用的行少于10,000行,则使用客户端处理,超过100,000行使用服务器端处理。中间是一个灰色地带,您需要根据您的应用程序的性质和您希望显示的数据做出决定!
请注意,这两种处理模式是相互排斥的 - 不能同时使用,也不能从一种模式动态转换到另一种模式。
客户端处理
客户端处理是DataTables的默认操作模式,因为它易于使用,不需要编写额外的代码。在客户端处理模式中,DataTables本身在浏览器中完成表中数据的排序,搜索,分页以及DataTables执行的所有其他数据处理操作。
服务器端处理
每页数据(称为绘图在数据表术语中)涉及向服务器发出Ajax请求。虽然每个Ajax请求可能需要几分之一秒才能完成,但是这种方法可能比所有数据加载时的大量等待前沿更可取。
服务器端处理由serverSide
选项启用,服务器端处理如何运行的完整文档可在本手册的部分中找到。
数据源类型
用于DataTable的主要数据源必须始终是一个数组(使用DOM源数据时会自动创建)。该数组中的每个项目都将定义一个要显示的行,DataTables可以使用三种基本的Javascript数据类型作为行的数据源:
- Arrays [ ]
- Objects { }
- Instances
new MyClass()
DataTables可以使用columns.data
和columns.render
选项从任何这些选项中使用数据。默认的操作模式是一个数组,但是对象和实例可能是有用的,因为在处理复杂的数据时它们通常更直观。
Arrays(数组)
在DataTable中,数组很容易处理,因为数组元素与列之间的映射只是通过读取该位置的数组元素值的列索引来执行的。例如,第一个表列映射到行的数据源的第一个数组元素等
因此,使用数组作为数据源时,每个数组中元素的数量必须等于表中的列数。例如,对于6列表,您可能有:
var data = [
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$3,120"
],
[
"Garrett Winters",
"Director",
"Edinburgh",
"8422",
"2011/07/25",
"$5,300"
]
]
表初始化:
$('#example').DataTable( {
data: data
} );
Objects(对象)
使用对象的缺点是,您需要明确告诉DataTables应该从每个列的对象中使用哪个属性。这是使用columns.data
和/或columns.render
选项完成的。
基于对象的数据可能如下所示:
[
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"name": "Garrett Winters",
"position": "Director",
"salary": "$5,300",
"start_date": "2011/07/25",
"office": "Edinburgh",
"extn": "8422"
}
]
表初始化:
$('#example').DataTable( {
data: data,
columns: [
{ data: 'name' },
{ data: 'position' },
{ data: 'salary' },
{ data: 'office' }
]
} );
请注意,只定义了4列,每列中显示的数据很容易通过更改每个属性的使用位置来定义,而不需要像对数组数据源那样重新排序源对象
Instances(实例)
让DataTables显示来自Javascript对象实例的信息是非常有用的,因为这些实例定义了可用于更新数据的抽象方法。例如,你可能有一个Employee
类,或一个Car
类,等等,这取决于你正在建模的数据。实例可以在DataTables中以与对象几乎相同的方式使用 - 只需传入对象,并columns.data
为每个列的数据提供方法或属性名称即可。
function Employee ( name, position, salary, office ) {
this.name = name;
this.position = position;
this.salary = salary;
this._office = office; this.office = function () {
return this._office;
}
}; $('#example').DataTable( {
data: [
new Employee( "Tiger Nixon", "System Architect", "$3,120", "Edinburgh" ),
new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh" )
],
columns: [
{ data: 'name' },
{ data: 'salary' },
{ data: 'office' },
{ data: 'position' }
]
} );
请注意,这office
是上面类的一个方法,而且name、
position、
salary
是属性。DataTables会自动实现一个函数,执行它并使用单元格的返回值(注意你也可以使用语法office()
来明确一个函数的使用 - 查看columns.data
更多信息)。
像上面的基于对象的数据源方法一样,虽然在这种情况下,Position
列的末尾显示的列表示可以按任意顺序读取属性
数据源
通过现在定义的处理模式和数据类型的概念,我们可以考虑DataTables实际上如何获取它所要操作的数据。DataTables将在表中显示的数据有三个基本来源:
- DOM(即文档的纯HTML)
- 使用Javascript
- Ajax来源的数据
DOM
当DataTables启动时,它会自动检查它正在操作的表是否已经存在于其中的数据,并将其用于表(注意,如果您使用数据传递data
或ajax
获取新数据,它将丢弃这些数据!) 。这是使用DataTables最简单的方法 - 使用常规的HTML表格。
请注意,使用DOM源表时,默认情况下,DataTables将使用数组作为数据源(请参见上文),不过您可以使用该columns.data
选项使其构造行数据的对象。
HTML5
DataTables还可以使用HTML5 data-*
属性,这些属性可以为DataTables提供用于排序和搜索数据的附加信息。例如,您可能有格式为“2016年11月21日”的日期列。浏览器将很难排序,但是你可以提供一个data-order
属性作为单元格的HTML的一部分,其中包含一个可以很容易地排序的时间戳。扩展这一点,可以使用提供的搜索数据data-search
。例如:
<td data-search="21st November 2016 21/11/2016" data-order="1479686400">
21st November 2016
</td>
数据表将自动检测:
- 订购数据:
data-order
和data-sort
属性 - 搜索数据:
data-search
和data-filter
属性。
有关更多信息,请参阅手动输入正交数据。
使用Javascript
您可以指示DataTables使用data
初始化选项使用给它的数据。这些数据可以是数组,对象或实例的形式(见上文),可以从任何你想要的地方获得!只要Javascript可以访问数据,你可以把它发送到DataTables(无论是从一个自定义的Ajax调用,一个WebSocket或只是一个老式的数据)。
在广泛使用DataTables API时,此方法可能特别有用,特别是可以使用row.add()
和row().remove()
方法动态地从表中添加和删除数据,而不管您希望选择的来源。
阿贾克斯
Ajax来源的数据很像Javascript提供的数据,但是DataTables将会通过Ajax调用来获取数据。从特定的脚本中获取表格数据通常是非常有用的,从显示器中分离出检索数据的逻辑。DataTable中的源自Ajax的数据由ajax
选项控制。以最简单的形式,将属性值设置为字符串,指向要从中加载数据的URL。
与Javascript源数据一样,Ajax提供的数据可以是对象或数组的形式(参见上文),但在这种情况下不能使用实例(因为它们不能用JSON表示)。
如上所述的服务器端处理是Ajax源数据的特殊形式,其中,仅当需要向用户显示该页面时,才通过Ajax请求来检索针对DataTable中的每个页面显示的数据。这使得服务器上的数据库引擎能够用于大型数据集。有关服务器端处理的更多信息以及如何实现,请参阅本手册中的文档。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="static/plugins/datatables/datatables.min.css">
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="static/css/nifty.min.css">
<script src="static/plugins/datatables/jQuery-2.1.4/jquery-2.1.4.min.js"></script>
<script src="static/plugins/datatables/datatables.min.js"></script> </head>
<body>
<div id="page-content">
<div class="panel">
<div class="panel-body">
<table id="example" class="table table-striped table-bordered" data-order='[[ 1, "asc" ]]' data-page-length='10' cellspacing="0" width="100%">
<thead>
<tr>
<th>项目名称</th>
<th>入库时间</th>
<th>执行状态</th>
<th>输出内容</th>
<th>开始时间</th>
<th>结束时间</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
var data = [
{
"name": "Tiger Nixon",
"position": "System Architect",
"start_date": {
"display": "Mon 25th Apr 11",
"timestamp": "1303682400"
},
"office": "Edinburgh"
},{
"name": "Tiger Nixon",
"position": "System Architect",
"start_date": {
"display": "Mon 25th Apr 11",
"timestamp": "1303682400"
},
"office": "Edinburgh"
},{
"name": "Tiger Nixon",
"position": "System Architect",
"start_date": {
"display": "Mon 25th Apr 11",
"timestamp": "1303682400"
},
"office": "Edinburgh"
},{
"name": "Tiger Nixon",
"position": "System Architect",
"start_date": {
"display": "Mon 25th Apr 11",
"timestamp": "1303682400"
},
"office": "Edinburgh"
},{
"name": "Tiger Nixon",
"position": "System Architect",
"start_date": {
"display": "Mon 25th Apr 11",
"timestamp": "1303682400"
},
"office": "Edinburgh"
},{
"name": "Tiger Nixon",
"position": "System Architect",
"start_date": {
"display": "Mon 25th Apr 10", // 用户方便读取的值
"timestamp": "1303682401" // 时间戳
},
"office": "Edinburgh"
},
];
$('#example').DataTable( {
data: data,
columns: [
{ data: 'name' },
{ data: 'position' },
{ data: 'office' },
{
data: 'start_date',
render: {
_: 'display', // 显示方便读取的值
sort: 'timestamp' // 排序使用时间戳
}
}, ]
} );
})
</script>
</html>
正交数据中的预定义值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="static/plugins/datatables/datatables.min.css">
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="static/css/nifty.min.css">
<script src="static/plugins/datatables/jQuery-2.1.4/jquery-2.1.4.min.js"></script>
<script src="static/plugins/datatables/datatables.min.js"></script> </head>
<body>
<div id="page-content">
<div class="panel">
<div class="panel-body">
<table id="example" class="table table-striped table-bordered" data-order='[[ 1, "asc" ]]' data-page-length='10' cellspacing="0" width="100%">
<thead>
<tr>
<th>项目名称</th>
<th>入库时间</th>
<th>执行状态</th>
<th>输出内容</th>
<th>开始时间</th>
<th>结束时间</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
var data = [
{
"name": "Tiger Nixon",
"position": "System Architect",
"start_date": "1303682400",
"office": "Edinburgh"
},{
"name": "Tiger Nixon",
"position": "System Architect",
"start_date": "1303682400",
"office": "Edinburgh"
},{
"name": "Tiger Nixon",
"position": "System Architect",
"start_date": "1303682400",
"office": "Edinburgh"
},{
"name": "Tiger Nixon",
"position": "System Architect",
"start_date": "1303682400",
"office": "Edinburgh"
},{
"name": "Tiger Nixon",
"position": "System Architect",
"start_date": "1303682400",
"office": "Edinburgh"
},{
"name": "Tiger Nixon",
"position": "System Architect",
"start_date": "1303682400",
"office": "Edinburgh"
},{
"name": "Tiger Nixon",
"position": "System Architect",
"start_date": "1303682400",
"office": "Edinburgh"
},
];
$('#example').DataTable( {
data: data,
columns: [
{ data: 'name' },
{ data: 'position' },
{ data: 'office' },
{
data: 'start_date',
render: function (data, type, row) {
// data : 该字段数据的值
// type : display,filter
// row : 该行数据
console.log(data, type, row,'123');
// If display or filter data is requested, format the date
if ( type === 'display' || type === 'filter' ) {
var d = new Date( data * 1000 );
return d.getDate() +'-'+ (d.getMonth()+1) +'-'+ d.getFullYear();
} // Otherwise the data type requested (`type`) is type detection or
// sorting data, for which we want to use the integer, so just return
// that, unaltered
return data;
}
}, ]
} );
})
</script>
</html>
正交数据中的计算值
jQuery Datetable的更多相关文章
- jQuery Datetable 渲染
渲染器 有些情况下,使用表时,表中的行的数据源不包含您希望在表中直接显示的值.您可能希望将其转换为不同的表示形式(时间戳为人类可读的格式),合并数据点(名字和姓氏)或对该值执行一些计算(计算营业额和费 ...
- [转]关于Jquery的DataTables里TableTools的应用
本文转自:http://147068307.iteye.com/blog/1700516 最近在产品中使用了TableTools这个工具,主要用来实现导出和复制功能. 但是在实际的运用中出现了以下相关 ...
- Angular杂谈系列1-如何在Angular2中使用jQuery及其插件
jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...
- jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧
这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...
- Jquery的点击事件,三句代码完成全选事件
先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- jQuery实践-网页版2048小游戏
▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...
- jquery和Js的区别和基础操作
jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...
- jQuery之ajax实现篇
jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...
- 利用snowfall.jquery.js实现爱心满屏飞
小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...
随机推荐
- 第四十八条:如果需要精确的答案,请避免使用float和double
让一个float或者double精确的表示0.1或者10的任何负数次方值都是不可能.float和double它们执行二进制浮点运算, 它们是为了在广泛的数值范围上提供较为精确的快速近似计算而精心设计的 ...
- JavaScript简写技巧总结
在日常工作中,JavaScript一些常用的简写技巧,将直接影响到我们的开发效率,现将常用技巧整理如下: 1. 空(null, undefined)验证 当我们创建了一个新的变量,我们通常会去 ...
- EasyUI中datagrid的基本用法
EasyUI中datagrid是最常用的一个控件了,现在整理一下datagrid的基本语法,先展示下页面效果吧,如下图
- python中导入模块的本质, 无法导入手写模块的解决办法
最近身边一些朋友发生在项目当中编写自己模块,导入的时候无法导入的问题. 下面我来分享一下关于python中导入模块的一些基本知识. 1 导入模块时寻找路径 在每一个运行的python程序当中,都维护了 ...
- SpringMVC(一):搭建一个SpringMVC helloword项目
操作步骤: 1)下载spring framework开发包,给eclipse安装spring开发插件,如何安装开发插件&下载开发包请参考我的博文:<Spring(一):eclipse上安 ...
- jacascript 偏移量offset、客户区client
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 偏移量 偏移量(offset dimension)是 javascript 中的一个重要的概念.涉及到偏移 ...
- javascript 函数的4种调用方式与 this(上下文)的指向
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! javascript中作用域链和this(上下文)的指向是很容易混淆的,简单的说就是: 作用域链取决于函数 ...
- 运维技巧-Nginx日志格式
1.说一说 当你安装完nginx,输出的格式是比较乱的,这样我们就需要自己去定义一下,自己看着舒服的格式. 2.Nginx日志字段 $remote_addr 记录客户端IP,但她的值不是客户端提供的, ...
- java制作验证码(java验证码小程序)
手动制作java的验证码 Web应用验证码的组成: (1)输入框 (2)显示验证码的图片 验证码的制作流程: 生成验证码的容器使用 j2ee的servlet 生成图片需要的类: (1) Buffere ...
- [SDOI 2013]森林
Description 题库链接 给你 \(n\) 个节点,初始 \(m\) 条边, \(t\) 组操作.让你支持: 询问树上路径点权 \(K\) 小: 支持加边操作. 强制在线,所有状态保证是一个树 ...