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. ARIA无障碍技术

    ARIA Accessible Rich Internet Applications (ARIA) 规定了能够让 Web 内容和 Web 应用(特别是那些由 Ajax 和 JavaScript 开发的 ...

  2. linux下安装与部署redis

    一.Redis介绍 Redis是当前比较热门的NOSQL系统之一,它是一个key-value存储系统.和Memcache类似,但很大程度补偿了Memcache的不足,它支持存储的value类型相对更多 ...

  3. svg动态添加小人

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  4. MSF基础应用

    实践目标 掌握metasploit的基本应用方式. 具体需要完成(1)ms08_067;(2)ms11_050:(3)Adobe(4)成功应用任何一个辅助模块. 报告 虚拟机:可以找我拷贝(我一般都在 ...

  5. Babel总结

    什么是babel? babel是一个JavaScript编译器. Babel是一个工具链,主要用于将ECMAScript 2015+代码转换为向后兼容的旧浏览器或环境中JavaScript版本. 注解 ...

  6. Codeforces 866C Gotta Go Fast - 动态规划 - 概率与期望 - 二分答案

    You're trying to set the record on your favorite video game. The game consists of N levels, which mu ...

  7. java基础篇之理解synchronized的用法

    Java语言的关键字,当它用来修饰一个方法或者一个代码块的时候,能够保证在同一时刻最多只有一个线程执行该段代码. 一.当两个并发线程访问同一个对象object中的这个synchronized(this ...

  8. uniGUI出新版本了,0.97.0.1081

    uniGUI出新版本了,0.97.0.1081,试用版0.97.0.1075,支持Delphi2006~XE7.下载地址是: http://www.unigui.com/downloads 已在XE6 ...

  9. ORM框架 之 Entity Framework

    Entity Framework 1.ADO.NET Entity Framework是以ADO.NET为基础所发展出来的对象关系对应(O/R Mapping)解决方案,早起被称为ObjectSpac ...

  10. 论文笔记之:Heterogeneous Face Attribute Estimation: A Deep Multi-Task Learning Approach

    Heterogeneous Face Attribute Estimation: A Deep Multi-Task Learning Approach  2017.11.28 Introductio ...