先来个官网可以直接看官网  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表格,尽管有时你可能需要添加theadtbody标签,因为这些并不总是被使用(它们允许DataTables知道应该使用什么列标题和点击顺序控制)。

请注意,如果您正在使用Ajax源数据,DataTables实际上可以为您生成theadtbody为您,以及表的所有行和单元格,但目前我们将专注于纯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.datacolumns.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启动时,它会自动检查它正在操作的表是否已经存在于其中的数据,并将其用于表(注意,如果您使用数据传递dataajax获取新数据,它将丢弃这些数据!) 。这是使用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-orderdata-sort属性
  • 搜索数据:data-searchdata-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的更多相关文章

  1. jQuery Datetable 渲染

    渲染器 有些情况下,使用表时,表中的行的数据源不包含您希望在表中直接显示的值.您可能希望将其转换为不同的表示形式(时间戳为人类可读的格式),合并数据点(名字和姓氏)或对该值执行一些计算(计算营业额和费 ...

  2. [转]关于Jquery的DataTables里TableTools的应用

    本文转自:http://147068307.iteye.com/blog/1700516 最近在产品中使用了TableTools这个工具,主要用来实现导出和复制功能. 但是在实际的运用中出现了以下相关 ...

  3. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  4. jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧

    这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...

  5. Jquery的点击事件,三句代码完成全选事件

    先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  6. jQuery实践-网页版2048小游戏

    ▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...

  7. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

  8. jQuery之ajax实现篇

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...

  9. 利用snowfall.jquery.js实现爱心满屏飞

    小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...

随机推荐

  1. LR回放https协议脚本失败: 错误 -27778: 在尝试与主机“www.baidu.com”connect 时发生 SSL 协议错误

    今天用LR录制脚本协议为https协议,回放脚本时出现报错: Action.c(14): 错误 -27778: 在尝试与主机"www.baidu.com"connect 时发生 S ...

  2. 吝啬的国度 nyoj

    吝啬的国度 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 在一个吝啬的国度里有N个城市,这N个城市间只有N-1条路把这个N个城市连接起来.现在,Tom在第S号城市, ...

  3. Browser Object Model

    BOM:浏览器提供的一系列对象 window对象是BOM最顶层对象 * 计时器setInterval(函数,时间)设置计时器 时间以毫秒为单位 clearInterval(timer) 暂停计时器se ...

  4. 自制 h5 音乐播放器 可搜索

    闲言碎语: 有好几天没有发表博客了,这也是因为一直开发音乐和完善我的博客项目,好不容易抽出时间总结一下这几天所做的东西,笔试又不断通知,实则匆忙 今天难得逃了一次课,就趁这时间,该写写就写写吧~~ 进 ...

  5. 工频相位无线同步模块PSYN5000系列在高压设备状态检测和局部放电故障定位的应用方案

    关键词: PSYN5000,无线同步模块,工频相位,局部放电,在线监测,高压设备,设备状态,故障定位. 前言: 在电力监测领域,出于方便和安全考虑,有些系统不得不采用无线通信的方式,在这样一个无线通信 ...

  6. R语言-离职率分析

    案例:员工流失是困扰企业的关键因素之一,在这次的分析中我将分析以下内容: 对一些重要变量进行可视化及探索分析,收入,晋升,满意度,绩效,是否加班等方面进行单变量分析 分析员工流失的因素,探索各个变量的 ...

  7. istio入门(05)istio的架构概念2

  8. SpringMvc返回报文形式的控制-验证方法: JSON or HTML or XML

    首先,请求通过accept请求头声明了支持的返回格式 然后,框架根据该请求头和代码实现(注解)选择了对应的MessageConverter处理返回! 一.验证过程 1.返回html 1.1.请求组装 ...

  9. 刨析Maven(对pom.xml配置文件常用标签的解析)

    昨天在阿里云看到了一句话,"当你Learning和Trying之后,如果能尽量把Teaching也做好,会促进我们思考".共勉! 这是关于Maven的第三篇博客,这次我们深入了解p ...

  10. C语言 左值、右值

    左值就是在赋值中可以放在赋值操作符两边的值 右值则是只可以放在赋值操作符右边的值 ++i是直接给i变量加1,然后返回i本身,因为i是变量,所以可以被赋值,因此是左值表达式i++现产生一个临时变量,记录 ...