DataTables示例 表格输入

为了执行分页,排序,搜索等操作,DataTables可以从 文档(即,不需要的行/单元格不会插入文档中)。这个 提高了性能和兼容性,但是,这意味着提交跨多个表单 页面需要一点点额外的工作来获取文档中没有的信息 longer.

$()DT 方法可用于从文档中获取节点 不管分页,排序等。此示例显示 $()DT being used to get all input 元素 from the table.

In the example a simple alert() is used to show the information from the form, but an 使用表单集结号游戏对服务器的Ajax调用很容易执行。

名称 年龄 位置 办公室
名称 年龄 位置 办公室
老虎·尼克松
加勒特·温特斯
阿什顿·考克斯(Ashton Cox)
塞德里克·凯利
沙里爱里
布里埃尔·威廉姆森(Brielle Williamson)
赫罗德·钱德勒
罗娜·戴维森
科琳·赫斯特(Colleen Hurst)
索尼娅·弗罗斯特
耶拿·盖恩斯(Jena Gaines)
奎因·弗林(Quinn Flynn)
查德·马歇尔
海莉·肯尼迪(Haley Kennedy)
塔蒂亚娜·菲茨帕特里克(Tatyana Fitzpatrick)
迈克尔·席尔瓦
保罗·伯德
Gloria Little
布拉德利·格里尔
戴里奥斯
珍妮特·考德威尔
尤里·贝里
凯撒万斯
多丽丝·怀尔德(Doris Wilder)
当归拉莫斯(Angelica Ramos)
加文·乔伊斯(Gavin Joyce)
张珍妮
布伦登·瓦格纳
菲奥娜·格林(Fiona Green)
寿头
米歇尔之家
苏基·伯克斯(Suki Burks)
普雷斯科特·巴特利特
加文·科尔特斯(Gavin Cortez)
马丁娜·麦克雷
团结管家
霍华德·哈特菲尔德
希望富恩特斯
薇薇安·哈瑞尔(Vivian Harrell)
蒂莫西·穆尼(Timothy Mooney)
杰克逊·布拉德肖
梁静茹
布鲁诺·纳什(Bruno Nash)
山本樱
雷神沃尔顿
芬·卡马乔(Finn Camacho)
塞尔吉·鲍德温(Serge Baldwin)
泽尼达·弗兰克(Zenaida Frank)
佐丽塔·塞拉诺(Zorita Serrano)
珍妮佛·阿科斯塔(Jennifer Acosta)
卡拉·史蒂文斯(Cara Stevens)
赫敏·巴特勒
莱尔·格里尔
乔纳斯·亚历山大(Jonas Alexander)
Shad Decker
迈克尔·布鲁斯
唐娜·斯尼德

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

$(document).ready(function() { var table = $('#example').DataTable(); $('button').click( function() { var data = table.$('input, select').serialize(); alert( "The following data would have been submitted to the server: \n\n"+ data.substr( 0, 120 )+'...' ); return false; } ); } );

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

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

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

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

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

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