jQuery - 第三方表格插件DataTables使用详解1（通过DOM、JS设置数据）

作者：hangge | 2018-03-06 08:10

一、基本介绍

1，什么是DataTables？

Datatables 是一款开源的 jQuery 表格插件。它具有高度灵活的特性，可以对任何 HTML 表格添加高级的交互功能。

官网地址：https://datatables.net/
GitHub 主页：https://github.com/DataTables/DataTables

2，功能特点

自带分页，即时搜索和排序功能
几乎支持任何数据源，比如：DOM、javascript、Ajax 和服务器处理
支持不同主题：DataTables、jQuery UI、Bootstrap、Foundation
支持各种扩展，包括编辑器, 表格工具, 固定列等等
丰富多样的选项配置和强大的 API
支持国际化
超过 2900+ 个单元测试
免费开源（MIT license）

3，安装配置

DataTables 配置很简单，只需要引入两个文件：DataTables 本身的脚本文件以及它的 css 样式文件。（当然作为 jQuery 插件，也别忘了引入 jQuery）。

<script src="js/jquery-3.1.1.js"  type="text/javascript"></script>
<script src="media/js/jquery.dataTables.js"  type="text/javascript"></script>
<link rel="stylesheet" href="media/css/jquery.dataTables.css" type="text/css" />

二、使用 DOM 元素作为表格数据

1，样例代码

这里我们直接调用 table 的 DataTable() 方法即可初始化表格。

注意：由于没有指定 data、ajax 选项，DataTable 会将该 table 的 html 标签上内容转换成对应的数据（Array 数据形式）。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/jquery-3.1.1.js"  type="text/javascript"></script>
    <script src="media/js/jquery.dataTables.js"  type="text/javascript"></script>
    <link rel="stylesheet" href="media/css/jquery.dataTables.css" type="text/css" />
    <script type="text/javascript">
      $(document).ready(function() {
          $('#myTable').DataTable();
      });
    </script>
  </head>
  <body>
    <table id="myTable">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>出生日期</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>011</td>
                <td>张三</td>
                <td>2011-11-23</td>
            </tr>
            <tr>
                <td>002</td>
                <td>李四</td>
                <td>2001-11-23</td>
            </tr>
            <tr>
                <td>003</td>
                <td>刘士元</td>
                <td>2021-08-21</td>
            </tr>
            <tr>
                <td>004</td>
                <td>李波斯</td>
                <td>2011-11-03</td>
            </tr>
            <tr>
                <td>005</td>
                <td>赵军</td>
                <td>2002-01-01</td>
            </tr>
            <tr>
                <td>006</td>
                <td>李子明</td>
                <td>2006-08-21</td>
            </tr>
            <tr>
                <td>007</td>
                <td>李小明</td>
                <td>2011-04-13</td>
            </tr>
            <tr>
                <td>008</td>
                <td>李大明</td>
                <td>2010-10-20</td>
            </tr>
            <tr>
                <td>009</td>
                <td>周生生</td>
                <td>2011-01-01</td>
            </tr>
            <tr>
                <td>010</td>
                <td>唐不甜</td>
                <td>2008-08-04</td>
            </tr>
            <tr>
                <td>001</td>
                <td>马成功</td>
                <td>2001-06-05</td>
            </tr>
        </tbody>
    </table>
  </body>
</html>

2，效果图

可看到表格自动添加了一些简单样式，且数据被自动分页。同时表格上下方会自动生成一些操作按钮：

左上方的下拉框可以选择每页显示的数量。
右上方可输入内容进行数据的实时筛选。
点击列头可以按该列数据进行排序（默认是按第一列数据升序排列）
表格下方则是页脚信息，以及翻页按钮。

三、使用 JS 设置表格数据

我们还可以通过 data 配置来指定数据源。

1，条目数据类型为数组的情况

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/jquery-3.1.1.js"  type="text/javascript"></script>
    <script src="media/js/jquery.dataTables.js"  type="text/javascript"></script>
    <link rel="stylesheet" href="media/css/jquery.dataTables.css" type="text/css" />
    <script type="text/javascript">
      $(document).ready(function() {
        var data = [
              [
                  "011",
                  "张三",
                  "2011-11-23"
              ],
              [
                  "002",
                  "李四",
                  "2001-11-23"
              ],
              [
                  "003",
                  "刘士元",
                  "2021-08-21"
              ]
          ];
          $('#myTable').DataTable({
            data: data
          });
      });
    </script>
  </head>
  <body>
    <table id="myTable">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>出生日期</th>
            </tr>
        </thead>
    </table>
  </body>
</html>

2，条目为对象的情况

var data = [
            {
                "id": "001",
                "name": "张三",
                "birthday": "2015-12-31"
            },
            {
                "id": "002",
                "name": "李四",
                "birthday": "2001-11-31"
            },
            {
                "id": "003",
                "name": "王五",
                "birthday": "2011-12-31"
            }
          ];
$('#myTable').dataTable({
  data: data,
  columns: [
      { data: 'id'},
      { data: 'name'},
      { data: 'birthday'}
  ]
});

3，条目为自定义实例的情况

这个本质和上面是一样的

function User(id, name, birthday) {
    this.id = id;
    this.name = name;
    this.birthday = birthday;
};

$('#myTable').dataTable({
  data: [
    new User("001", "张三", "2014-01-21"),
    new User("002", "李四", "2001-01-21"),
    new User("003", "王五", "2013-01-21")
  ],
  columns: [
      { data: 'id'},
      { data: 'name'},
      { data: 'birthday'}
  ]
});

附：刷新数据（重新加载数据）

如果想要手动重新设置全部数据，可以先清空表格，再重新设置。

//需要设置的新数据
var newData = [
                [
                    "110",
                    "余得水",
                    "2000-11-23"
                ],
                [
                    "111",
                    "曹得旺",
                    "2001-11-23"
                ],
              ];

//重新设置数据
var table = $('#myTable').DataTable();
table.clear();
table.rows.add(newData).draw();

其他