来源：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

• 支持国际化

---

开始使用

中文官网：

http://datatables.club/

使用DataTable基本手册：

http://datatables.club/manual/

在线API：

http://datatables.club/reference/

---

打开手册的官网地址

• 安装开始一步一步使用

---

1、HTML编辑器： WebStorm

这里我推荐一款强大的HTML编辑器： WebStorm

WebStorm官网地址：

http://www.jetbrains.com/webstorm/download/#section=windows

直接下载链接：

https://download.jetbrains.8686c.com/webstorm/WebStorm-2017.1.exe

免费使用教程：

打开WebStorm->Help->Register

• 1

---

输入在线认证链接：http://idea.iteblog.com/key.php

认证之后就可以免费使用了。

---

1、安装

1、下载最新的DataTable

打开安装页：

http://datatables.club/manual/install.html

---

下载地址：

http://datatables.net/releases/DataTables-1.10.13.zip

解压出来之后会有一个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：

http://datatables.club/reference/option/

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、样式

样式：

http://datatables.club/manual/styling.html

这里掌握Bootstrap的样式即可：

http://datatables.club/manual/styling/bootstrap.html

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)

http://datatables.club/manual/server-side.html

开启服务器模式（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的入门教程就先到这里了，真实项目中一般会用这种数据表格来做后台的数据显示，所以掌握这个插件还是蛮重要的。