来源:https://blog.csdn.net/gfd54gd5f46/article/details/65938189
DataTable是什么?
Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。
分页,即时搜索和排序
几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理
支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
各式各样的扩展: Editor, TableTools, FixedColumns ……
丰富多样的option和强大的API
支持国际化
开始使用
中文官网:
使用DataTable基本手册:
在线API:
打开手册的官网地址
- 安装开始一步一步使用
1、HTML编辑器: WebStorm
这里我推荐一款强大的HTML编辑器: WebStorm
WebStorm官网地址:
直接下载链接:
https://download.jetbrains.8686c.com/webstorm/WebStorm-2017.1.exe
免费使用教程:
打开WebStorm->Help->Register
- 1
输入在线认证链接:http://idea.iteblog.com/key.php
认证之后就可以免费使用了。
1、安装
1、下载最新的DataTable
打开安装页:
下载地址:
解压出来之后会有一个media的文件夹
文件夹包涵DataTable所有依赖文件
将media这个文件加加入到你的html工程下
2、引入js/css文件
1、新建index.html文件,引入依赖文件:
官方CDN地址:
<!--第一步:引入Javascript / CSS (CDN)-->
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
因为我们下载了资源包,所以直接引入本地的即可
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="media/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="media/js/jquery.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="media/js/jquery.dataTables.js"></script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
3、添加html代码
<!--第二步:添加如下 HTML 代码-->
<table id="table_id_example" 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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
4、初始化Datatables
<script>
<!--第三步:初始化Datatables-->
$(document).ready(function () {
$('#table_id_example').DataTable();
});
</script>
- 1
- 2
- 3
- 4
- 5
- 6
效果图:
2、Data
DataTables 处理数据的三个核心概念:
处理模式
数据类型
数据源
1、处理模式(Processing modes)
DataTables 中有两种不同的方式处理数据(排序、搜索、分页等):
- 客户端处理(Client)—— 所有的数据集预先加载(一次获取所有数据),数据处理都是在浏览器中完成的【逻辑分页】。
- 服务器端处理(ServerSide)—— 数据处理是在服务器上执行(页面只处理当前页的数据)【物理分页】。
开启服务端模式:ServerSide:true
- 1
每种模式都有自己的优点和缺点,选择哪种模式是由你的数据量决定的。
注意:两种处理模式不能同时使用,但是可以动态更改从一个模式到另一个。
2、数据源类型(Data source types)
DataTables 使用的数据源必须是一个数组,数组里的每一项将显示在你定义的行上面,DataTables 可以使用三种基本的 JavaScript 数据类型来作为数据源:
数组(Arrays [])
对象(objects {})
实例(new myclass())
重点了解对象(objects {})
的使用即可
3、数据源(Data sources)
DataTables 支持三种数据源显示:
- DOM
- JavaScript
- Ajax
重点掌握Ajax的使用即可
3、选项
选项(Option)API:
datatables中大量的选项可以用来定制你的表格展现给用户。
1、通过设置paging选项,禁止表格分页(默认是打开的)
$('#example').DataTable( {
paging: false
} );
- 1
- 2
- 3
2、假设你要在表格里使用滚动,你需要加上scrollY选项:
$('#example').DataTable( {
scrollY: 400
} );
- 1
- 2
- 3
3、当然你可以组合多个选项来初始化datatables,启动滚动条,禁用分页
$('#example').DataTable( {
paging: false,
scrollY: 400
} );
- 1
- 2
- 3
- 4
常用选项(Common options)
下面列举了一些比较有用的选项:
- ajax - 异步数据源配置
- data - javascript数据源配置
- serverSide - 开启服务器模式
- columns.data - 配置每一列的数据源
- scrollX - 水平滚动条
- scrollY - 垂直滚动条
4、样式
样式:
这里掌握Bootstrap的样式即可:
css:
http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.css
js:
http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.js
在head里加上Bootstrap的CSS/JS就可以使用样式了
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="media/css/dataTables.bootstrap.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="media/js/jquery.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="media/js/dataTables.bootstrap.js"></script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
5、服务器处理(Server-side processing)
开启服务器模式(Configuration)
$('#example').DataTable( {
//开启服务器模式
serverSide: true,
//数据来源(包括处理分页,排序,过滤) ,即url,action,接口,等等
ajax: '/data-source'
} );
- 1
- 2
- 3
- 4
- 5
- 6
可以直接接受一个字符串也可以作为一个对象使用。作为对象他就像 jQuery.ajax 配置一样比如我要 DataTables 以post方式发送的请求,代码如下
$('#example').DataTable( {
serverSide: true,
ajax: {
url: '/data-source',
type: 'POST'
}
} );
- 1
- 2
- 3
- 4
- 5
- 6
- 7
6、国际化
Datatables默认的是英语,但是可以很容翻译成其他的语言。 由社区提供的超过50多种语言,让你在Datatables中使用
配置(Configuration)
- Datatables中所使用的语言选项是通过 language 来配置的。 这是一个对象字符串,通过一个参数来描述Datatables的每个部分。
$('#example').DataTable( {
language: {
search: "在表格中搜索:"
}
} );
- 1
- 2
- 3
- 4
- 5
- 与其他初始化选项一样,你可以按你所希望的改变尽可能多或尽可能少的选项。那些选项你不赋值,Datatables会使用默认值, 本示例显示每个语言选项,用中文显示Datatables接口:
$('#example').DataTable({
language: {
"sProcessing": "处理中...",
"sLengthMenu": "显示 _MENU_ 项结果",
"sZeroRecords": "没有匹配结果",
"sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项结果,共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
}
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
异步加载翻译(Ajax loading a translation)
- 1、创建一个zh_CN.txt的文本
{ "sProcessing": "处理中...",
"sLengthMenu": "显示 _MENU_ 项结果",
"sZeroRecords": "没有匹配结果",
"sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项结果,共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 2、使用异步的方式加载
$('#example').DataTable({
language: {
url:"zh_CN.txt"
}
});
- 1
- 2
- 3
- 4
- 5
实例(异步请求JSON数据):
1、新建一个data.json文件
模拟一段json格式的数据(注意:我们使用的是对象(objects {}) 的数据源类型,所以必须加上大括号)
{
"draw": 1,
"recordsTotal": 200,
"recordsFiltered": 200,
"data": [
{
"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"
}
]
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
2、开启服务端模式,使用ajax请求
$(document).ready( function () {
var table = $('#table_id_example').DataTable({
//开启服务端模式
serviceSize:true,
//使用ajax异步请求的方式加载数据
ajax:{
//使用POST请求的方式(注意:多个字段必须在后面加上逗号)
type:'POST',
//请求的URL地址(填写服务端的接口地址即可,这里我就模拟一个本地的数据)
url:'data.json'
}
});
} );
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
3、配置columns
使用对象数组,一定要配置columns,告诉 DataTables 每列对应的属性data 这里是固定不变的,name,position,salary,office 为你数据里对应的属性
//使用对象数组,一定要配置columns,告诉 DataTables 每列对应的属性
//data 这里是固定不变的,name,position,salary,office 为你数据里对应的属性
columns: [
{ data: 'name' },
{ data: 'position' },
{ data: 'salary' },
{ data: 'office' }
]
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
4、完整源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>datatable例子</title>
<!--第一步:引入Javascript / CSS (CDN)-->
<!--或者下载到本地,下面有下载地址-->
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="media/css/dataTables.bootstrap.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="media/js/jquery.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="media/js/dataTables.bootstrap.js"></script>
</head>
<body>
<table id="table_id_example" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
<thead>
<tr>
<th>姓名</th>
<th>岗位</th>
<th>工资</th>
<th>部门</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
<!--第三步:初始化Datatables-->
$(document).ready( function () {
var table = $('#table_id_example').DataTable({
language: {
url:"zh_CN.txt"
},
"info" : true,
"paging": true,
"processing":false,
"searching": true,
//使用对象数组,一定要配置columns,告诉 DataTables 每列对应的属性
//data 这里是固定不变的,name,position,salary,office 为你数据里对应的属性
columns: [
{ data: 'name' },
{ data: 'position' },
{ data: 'salary' },
{ data: 'office' }
],
//开启服务器模式
serverSide: true,
//使用ajax异步请求
ajax:{
type:'POST',
url:'data.json'
}
});
} );
</script>
</table>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
DataTables的入门教程就先到这里了,真实项目中一般会用这种数据表格来做后台的数据显示,所以掌握这个插件还是蛮重要的。