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)也可以使用。

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表格的要求,但有时您可能需要添加theadtbody标签,因为这些标签并不总是被使用(它们允许DataTables知道应该用于列标题和点击顺序控制)。

请注意,如果您使用的是来自Ajax的数据,DataTables实际上可以为您theadtbody您生成表格的所有行和单元格,但目前我们将专注于纯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

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:

<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及其默认样式:

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

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

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

鲍尔

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

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

初始化DataTables

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

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

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

为HTML表格添加交互功能------DataTables的更多相关文章

  1. Swift - 给表格添加编辑功能(删除,插入)

    1,下面的样例是给表格UITableView添加编辑功能: (1)给表格添加长按功能,长按后表格进入编辑状态 (2)在编辑状态下,第一个分组处于删除状态,第二个分组处于插入状态 (3)点击删除图标,删 ...

  2. jqGrid添加删除功能(不和数据库交互)

    jqGrid添加删除功能(不和数据库交互) 一.背景需求 项目中需要在前端页面动态的添加行,删除行,上下移动行等,同时还不和数据库交互.一直在用jqGrid展示表格的我们,从没有深入的研究过它,当然看 ...

  3. Swift - 给表格添加移动单元格功能(拖动行)

    1,下面的样例是给表格UITableView添加单元格移动功能: (1)给表格添加长按功能,长按后表格进入编辑状态  (2)在编辑状态下,可以看到单元格后面出现拖动按钮  (3)鼠标按住拖动按钮,可以 ...

  4. Windows 10 IoT Serials 5 - 如何为树莓派应用程序添加语音识别与交互功能

    都说语音是人机交互的重要手段,虽然个人觉得在大庭广众之下,对着手机发号施令会显得有些尴尬.但是在资源受限的物联网应用场景下(无法外接鼠标键盘显示器),如果能够通过语音来控制设备,与设备进行交互,那还是 ...

  5. 033医疗项目-模块三:药品供应商目录模块——供货商药品目录t添加查询功能----------Dao层和Service层和Action层和调试

    什么叫做供货商药品目录t添加查询功能?就是说我们前面的博客里面不是说供货商登录后看到了自己供应的药品了么如下: 现在供货商想要往里面添加别的药品,那么这个药品的来源就是卫生局提供的那个Ypxx表(药品 ...

  6. 为Spring添加REST功能

    1 关于REST 我的理解,REST就是将资源以最合适的形式在服务端和客户端之间传递. 系统中资源采用URL进行标识(可以理解为URL路径中带参数) 使用HTTP方法进行资源的管理(GET,PUT,P ...

  7. 使用SIP Servlet为Java EE添加语音功能

    会话发起协议(Session Initiation Protocol,SIP)是一种信号传输协议,用于建立.修改和终止两个端点之间的会话.SIP 可用于建立 两方呼叫.多方呼叫,或者甚至 Intern ...

  8. 【转】一张图解析FastAdmin中的表格列表的功能

     一张图解析FastAdmin中的表格列表的功能 功能描述请根据图片上的数字索引查看对应功能说明. 1.时间筛选器如果想在搜索栏使用时间区间进行搜索,则可以在JS中修改修改字段属性,如 {field: ...

  9. Spring学习笔记5—为Spring添加REST功能

    1 关于REST 我的理解,REST就是将资源以最合适的形式在服务端和客户端之间传递. 系统中资源采用URL进行标识(可以理解为URL路径中带参数) 使用HTTP方法进行资源的管理(GET,PUT,P ...

随机推荐

  1. word2010自定义的多级列表编号变成黑块的解决办法

    首先,看图说话 是的,当我保存Word再打开之后,我辛辛苦苦(没错,小白有罪,调来调去真辛苦)搞得多级列表编号变成了黑块,默默无言,只有泪千行,还好有万能的Google. 解决办法: 将光标移到黑块的 ...

  2. 06: mysql索引查找原理及调优

    MySQL其他篇 目录: 1.1 常见查找方法举例 1.2 索引数据结构设相关的计算机原理 1.3 MyISAM实现索引 1.4 InnoDB索引实现 1.5 索引使用策略 1.1 常见查找方法举例返 ...

  3. centos6.5编译安装php7

    1.安装依赖软件库: yum install -y libxml2-devel libtool* curl-devel libjpeg-devel libpng-devel freetype-deve ...

  4. topcoder srm 440 div1

    problem1 link 二分答案,然后计算总时间.跟$T$比较确定要增大答案还是减小答案. problem2 link 可以看作是以‘*’所在位置为根的树.所以每个非根节点都有一个父节点. 那么每 ...

  5. topcoder srm 360 div1

    problem1 link (1)$n \neq m$时,假设$n<m$,那么同一行中的$m$个数字必定都相等. (2)$n=m$时,要满足任意的$i_{1},i_{2},j_{1},j_{2} ...

  6. Ubuntu18.04 一些好用的扩展

    原文:https://www.lulinux.com/archives/2589 一些好用的扩展: United:https://www.gnome-look.org/p/1167950/ dynam ...

  7. tp框架中 关于数据库mysql 的一些疑点知识

    mysql创建索引, 通常是在 创建表的 同时/时候, 就创建了 即使是在win下, 用命令行操作数据库 , 也要比 图形界面的鼠标操作快得多 索引的类型有: unique, fulltext索引, ...

  8. CF 1087解题报告

    cf解题报告 记录一下吧 做出:T1 rating :-97 想起几个月前做不出T1还是有点小搞笑呀2333 T1 双指针+特判 T2 发现k特别小,枚举剩余系 还要判断是否是能被n整除 移项发现可以 ...

  9. NodeJs中npm使用

    什么是 NPM npm 之于 Node ,就像 pip 之于 Python , gem 之于 Ruby , pear 之于 PHP . npm 是 Node 官方提供的包管理工具,他已经成了 Node ...

  10. IntelliJ IDEA 中SpringBoot对Run/Debug Configurations配置 SpringBoot热部署

    运行一个SpringBoot多模块应用 使用SpringBoot配置启动: Use classpath of module选中要运行的模块 VM options:内部配置参数 -Dserver.por ...