DataTables示例 多个表

通常,您可能希望使用一个语句来初始化多个表。这很简单 通过使用jQuery选择器,它将选择多个表。

这些表独立于用户控制(即,一个表上的用户控制分页不 影响其他),但它们确实共享给定的初始化参数(例如,如果您 西班牙文档案,所有表格都会以西班牙文显示)。此外,该API可用于 一起操作或独立操作。

下面的示例显示了两个表,它们通过使用 table.display 选择器(即选择具有以下类别的所有元素 table.display (在此示例中合适,您可能希望使用其他 selector).

名称 位置 办公室 年龄 薪水
名称 位置 办公室 年龄 薪水
老虎·尼克松 系统架构师 爱丁堡 61 $ 320,800
塞德里克·凯利 高级JavaScript开发人员 爱丁堡 22 $ 433,060
索尼娅·弗罗斯特 软件工程师 爱丁堡 23 $ 103,600
奎因·弗林(Quinn Flynn) 支持主管 爱丁堡 22 $ 342,000
戴里奥斯 人事主管 爱丁堡 35 $ 217,500
加文·乔伊斯(Gavin Joyce) 开发者 爱丁堡 42 $ 92,575
马丁娜·麦克雷 售后支持 爱丁堡 46 $ 324,050
珍妮佛·阿科斯塔(Jennifer Acosta) 初级Java语言开发人员 爱丁堡 43 $ 75,650
Shad Decker 区域总监 爱丁堡 51 $ 183,000
名称 位置 办公室 年龄 薪水
名称 位置 办公室 年龄 薪水
耶拿·盖恩斯(Jena Gaines) 办公室主管 伦敦 30 $ 90,560
海莉·肯尼迪(Haley Kennedy) 高级营销设计师 伦敦 43 $ 313,500
塔蒂亚娜·菲茨帕特里克(Tatyana Fitzpatrick) 区域总监 伦敦 19 $ 385,750
迈克尔·席尔瓦 营销设计师 伦敦 66 $ 198,500
布拉德利·格里尔 软件工程师 伦敦 41 $ 132,000
当归拉莫斯(Angelica Ramos) 首席执行官(CEO) 伦敦 47 $ 1,200,000
苏基·伯克斯(Suki Burks) 开发者 伦敦 53 $ 114,500
普雷斯科特·巴特利特 技术作者 伦敦 27 $ 145,000
蒂莫西·穆尼(Timothy Mooney) 办公室主管 伦敦 37 $ 136,200
布鲁诺·纳什(Bruno Nash) 软件工程师 伦敦 38 $ 163,500
赫敏·巴特勒 区域总监 伦敦 47 $ 356,250
莱尔·格里尔 系统管理员 伦敦 21 $ 103,500

下面显示的Javascript用于初始化此显示的表 example:

$(document).ready(function() { $('table.display').dataTable(); } );

除上述代码外,以下Javascript库文件也已加载以供在本文档中使用。 example:

下面显示的HTML是原始HTML表格元素,之前已通过 DataTables:

除了从库中加载的内容外,此示例还使用了一些其他CSS 文件(如下),以便正确显示表格。显示了使用的其他CSS below:

div.dataTables_wrapper { margin-bottom: 3em; }

加载以下CSS库文件以供本示例使用,以提供 table:

该表通过Ajax加载数据。下面显示了已加载的最新数据。这个数据 将在加载任何其他数据时自动更新。

下面显示了用于执行此表的服务器端处理的脚本。请注意 这只是使用PHP的示例脚本。服务器端处理脚本可以用任何形式编写 language, using 协议中描述的协议 DataTables文档.