为HTML表格添加交互功能------DataTables

DataTables是一个功能强大的Javascript库，用于为HTML表格添加交互功能，虽然简单性是整个项目的核心设计原则，但入门看起来相当艰巨。但是，采取这些第一步并在您的网站上运行DataTables实际上是非常简单的，因为您只需在页面中添加两个附加文件即可：

  • DataTables JavaScript文件
  • DataTables CSS文件

还有其他可用的文件，如用于添加编辑功能的编辑器和其他插件，可用于扩展DataTable的功能集，但基本上，您只需包含这两个文件即可启动并运行！

要求

在我们开始之前，我们需要考虑DataTables的操作要求。

依赖

DataTables只有一个库依赖项（依赖它的工作所依赖的其他软件） - jQuery。作为一个jQuery插件，DataTables利用了jQuery提供的许多优秀功能，并以与其他所有jQuery插件相同的方式挂载到jQuery插件系统中。jQuery 1.7或更新版本将与DataTables一起使用，但通常您会想要使用最新版本。DataTables包括它需要运行的所有其他内容。

HTML

为了DataTable能够增强HTML表格，该表格必须是有效的，格式良好的HTML，带有header（thead）和单个主体（tbody）。可选的页脚（tfoot）也可以使用。

HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<table id="table_id" class="display"><font></font>
    <thead><font></font>
        <tr><font></font>
            <th>Column 1</th><font></font>
            <th>Column 2</th><font></font>
        </tr><font></font>
    </thead><font></font>
    <tbody><font></font>
        <tr><font></font>
            <td>Row 1 Data 1</td><font></font>
            <td>Row 1 Data 2</td><font></font>
        </tr><font></font>
        <tr><font></font>
            <td>Row 2 Data 1</td><font></font>
            <td>Row 2 Data 2</td><font></font>
        </tr><font></font>
    </tbody><font></font>
</table><font></font>

如果您使用服务器端程序（例如PHP脚本，Ruby脚本，C＃程序或其他任何软件）生成HTML文档，则只需输出您的表格即可。这正是您对普通HTML表格的要求，但有时您可能需要添加thead和tbody标签，因为这些标签并不总是被使用（它们允许DataTables知道应该用于列标题和点击顺序控制）。

请注意，如果您使用的是来自Ajax的数据，DataTables实际上可以为您thead和tbody您生成表格的所有行和单元格，但目前我们将专注于纯HTML。有关DataTables可以使用的不同数据源的更多信息，请参阅本手册的数据源部分。

安装Javascript / CSS

DataTables安装的关键部分是在您的页面上包含DataTables源文件。正如本页顶部所述，这只需包括DataTables Javascript和CSS文件。CSS文件实际上是可选的，但它为您的表提供了默认样式，以最小的努力使其看起来很好。如果要自定义默认DataTables CSS的颜色，请参阅样式主题创建器。

所需的文件可以以多种不同的方式安装：

CDN

下载构建器

一个下载建设者可这将会建立一个定制包您满意-基于功能和造型你想为你的DataTable。产生的文件在DataTables CDN上可用，或者可以在本地下载（见下文）。

CDN是一种内容分发网络，它具有边缘服务器，用于为网页浏览器提供延迟非常低的媒体文件，并且当用户从CDN接收文件时，浏览器将缓存该文件以便重复使用。这意味着使用相同的Javascript库的不同站点可以共享大量的性能改进，因为浏览器无需从每个站点的不同服务器下载相同的文件。

DataTables CDN由CloudFlare提供支持，CloudFlare在世界各地都有边缘服务器，确保访问者的浏览器尽可能快地加载DataTable的Javascript和CSS。

要在您的页面上包含DataTables，只需包含以下HTML（还记得要包含jQuery：

HTML
1
2
3
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css"><font></font>
 <font></font>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script><font></font>

本地安装

如果您不想使用CDN，而是将文件托管在您自己的服务器上，或者如果您想要修改文件，那么使用DataTable简单易行。

只需使用下载构建器即可下载最新版本的DataTables，选择所需的其他软件和样式并下载定制软件包。然后解压并上传到您的网络服务器。然后你将DataTables在你的服务器上有一个可用的目录。然后使用以下HTML在您的页面上添加DataTables：

HTML
<link rel="stylesheet" type="text/css" href="/DataTables/datatables.css"><font></font>
<font></font>
<script type="text/javascript" charset="utf8" src="/DataTables/datatables.js"></script><font></font>

NPM

DataTables及其扩展可用作NPM软件包。软件包基本名称是datatables.net，扩展和样式集成选项可作为单独的软件包提供 - 请参阅NPM安装指南以获取有关可用软件包的完整详细信息。

例如，以下内容可用于安装DataTables及其默认样式：

使用Javascript
1
2
npm install datatables.net    # Core library<font></font>
npm install datatables.net-dt # Styling<font></font>

DataTables软件包全部导出可以使用两个可选参数（即window要使用的jQuery对象）执行的工厂函数- 有关这些参数的详细信息，请再次参阅NPM安装指南。当使用Browserify时，您可以简单地执行没有任何参数的函数 - 例如：

使用Javascript
1
2
var $  = require( 'jquery' );<font></font>
var dt = require( 'datatables.net' )();<font></font>

鲍尔

DataTables，其扩展和样式选项也可作为Bower软件包提供。软件包名称与以datatables.net基本名称为名的NPM软件包相同。通过凉亭使用来安装DataTables及其默认样式：

使用Javascript
1
2
bower install --save datatables.net<font></font>
bower install --save datatables.net-dt<font></font>

初始化DataTables

这几乎就是它！我们已经有了我们想要增强的HTML表格，并且我们已经拥有了我们需要的所有软件和样式。现在所需要做的就是告诉DataTables在桌面上真正发挥它的魔力。这是用几行Javascript完成的：

使用Javascript
1
2
3
$(document).ready( function () {<font></font>
    $('#table_id').DataTable();<font></font>
} );<font></font>

datatables官网：https://www.datatables.net/manual/installation

posted @ 2018-04-09 15:51  夏目友人喵  阅读(639)  评论(0)  编辑  收藏  举报