DataTables示例 实时DOM订购

本示例说明如何使用DOM中可用的信息对列进行排序。通常 DataTables将在初始化阶段读取要订购的信息,并且不会 会根据用户互动进行更新,因此对具有例如以下表单元素的列进行排序 它们可能无法反映输入的当前值。要解决此问题,您必须更新 DataTables将在订购之前订购的数据。这种方法比 实际使用DOM进行排序,因为要排序的每个单元只需要一个DOM查询。

下面的示例将前两列显示为正常文本,并具有您期望的顺序。的 以下各列均具有不同种类的表单输入元素,并且所包含的信息 其中,DataTables将基于订单时的值执行订单。

这是一个非常简单的示例,但是您并不仅限于使用表单输入元素, 您可以使用任何东西并自定义DOM查询以适合自己。您还可以更新 使用事件处理程序调用,以用户身份实时输入表单中的数据 要么 der()DT 要么 draw()DT 方法。

名称 年龄 位置 办公室
名称 年龄 位置 办公室
老虎·尼克松
加勒特·温特斯
阿什顿·考克斯(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:

/* Create an array with the values of all the input boxes in a column */ $.fn.dataTable.ext.order['dom-text'] = function ( settings, col ) { return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) { return $('input', td).val(); } ); } /* Create an array with the values of all the input boxes in a column, parsed as numbers */ $.fn.dataTable.ext.order['dom-text-numeric'] = function ( settings, col ) { return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) { return $('input', td).val() * 1; } ); } /* Create an array with the values of all the select options in a column */ $.fn.dataTable.ext.order['dom-select'] = function ( settings, col ) { return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) { return $('select', td).val(); } ); } /* Create an array with the values of all the checkboxes in a column */ $.fn.dataTable.ext.order['dom-checkbox'] = function ( settings, col ) { return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) { return $('input', td).prop('checked') ? '1' : '0'; } ); } /* Initialise the table with the required column 要么 dering data types */ $(document).ready(function() { $('#example').dataTable( { "columns": [ null, { "orderDataType": "dom-text-numeric" }, { "orderDataType": "dom-text" }, { "orderDataType": "dom-select" } ] } ); } );

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

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

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

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

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

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