实时 DOM 排序
此示例演示如何使用 DOM 中可用的信息对列进行排序。通常，DataTables 会在其初始化阶段读取要排序的信息，并且不会根据用户交互进行更新，因此对包含表单元素的列进行排序可能无法反映输入的当前值。为了克服此问题，您必须在排序之前更新 DataTables 将排序的数据。此方法比实际使用 DOM 进行排序效率更高，因为每个要排序的单元格只需要一个 DOM 查询。
下面的示例显示第一列为普通文本，并按预期进行排序。后续列都包含不同类型的表单输入元素，其中包含的信息是 DataTables 将根据排序时的时间点进行排序的信息。
这是一个相当简单的示例，但您不限于仅使用表单输入元素，您可以使用任何内容并自定义您的 DOM 查询以适合您自己。您还可以通过使用调用 order() 或 draw() 方法的事件处理程序，在用户将数据输入表单时实时更新排序。
| 姓名 | 年龄 | 职位 | 办公室 |
|---|---|---|---|
| Tiger Nixon | |||
| Garrett Winters | |||
| Ashton Cox | |||
| Cedric Kelly | |||
| Airi Satou | |||
| Brielle Williamson | |||
| Herrod Chandler | |||
| Rhona Davidson | |||
| Colleen Hurst | |||
| Sonya Frost | |||
| Jena Gaines | |||
| Quinn Flynn | |||
| Charde Marshall | |||
| Haley Kennedy | |||
| Tatyana Fitzpatrick | |||
| Michael Silva | |||
| Paul Byrd | |||
| Gloria Little | |||
| Bradley Greer | |||
| Dai Rios | |||
| Jenette Caldwell | |||
| Yuri Berry | |||
| Caesar Vance | |||
| Doris Wilder | |||
| Angelica Ramos | |||
| Gavin Joyce | |||
| Jennifer Chang | |||
| Brenden Wagner | |||
| Fiona Green | |||
| Shou Itou | |||
| Michelle House | |||
| Suki Burks | |||
| Prescott Bartlett | |||
| Gavin Cortez | |||
| Martena Mccray | |||
| Unity Butler | |||
| Howard Hatfield | |||
| Hope Fuentes | |||
| Vivian Harrell | |||
| Timothy Mooney | |||
| Jackson Bradshaw | |||
| Olivia Liang | |||
| Bruno Nash | |||
| Sakura Yamamoto | |||
| Thor Walton | |||
| Finn Camacho | |||
| Serge Baldwin | |||
| Zenaida Frank | |||
| Zorita Serrano | |||
| Jennifer Acosta | |||
| Cara Stevens | |||
| Hermione Butler | |||
| Lael Greer | |||
| Jonas Alexander | |||
| Shad Decker | |||
| Michael Bruce | |||
| Donna Snider | |||
| 姓名 | 年龄 | 职位 | 办公室 |
- Javascript
- HTML
- CSS
- Ajax
- 服务器端脚本
- 注释
下面显示的 Javascript 用于初始化此示例中显示的表格
// 创建一个包含列中所有输入框值的数组 DataTable.ext.order['dom-text'] = function (settings, col) { return this.api() .column(col, { order: 'index' }) .nodes() .map(function (td, i) { return $('input', td).val(); }); }; // 创建一个包含列中所有输入框值（解析为数字）的数组 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; }); }; // 创建一个包含列中所有选择选项值的数组 DataTable.ext.order['dom-select'] = function (settings, col) { return this.api() .column(col, { order: 'index' }) .nodes() .map(function (td, i) { return $('select', td).val(); }); }; // 创建一个包含列中所有复选框值的数组 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'; }); }; // 使用所需的列排序数据类型初始化表格 $('#example').DataTable({ columns: [ null, { orderDataType: 'dom-text-numeric' }, { orderDataType: 'dom-text', type: 'string' }, { orderDataType: 'dom-select' } ] });
// 创建一个包含列中所有输入框值的数组 DataTable.ext.order['dom-text'] = function (settings, col) { return this.api() .column(col, { order: 'index' }) .nodes() .map(function (td, i) { let el = td.querySelector('input'); return el ? el.value : 0; }); }; // 创建一个包含列中所有输入框值（解析为数字）的数组 DataTable.ext.order['dom-text-numeric'] = function (settings, col) { return this.api() .column(col, { order: 'index' }) .nodes() .map(function (td, i) { let el = td.querySelector('input'); return el ? el.value * 1 : 0; }); }; // 创建一个包含列中所有选择选项值的数组 DataTable.ext.order['dom-select'] = function (settings, col) { return this.api() .column(col, { order: 'index' }) .nodes() .map(function (td, i) { let el = td.querySelector('select'); return el ? el.value : 0; }); }; // 创建一个包含列中所有复选框值的数组 DataTable.ext.order['dom-checkbox'] = function (settings, col) { return this.api() .column(col, { order: 'index' }) .nodes() .map(function (td, i) { let el = td.querySelector('input'); return el ? (el.checked ? 1 : 0) : 0; }); }; // 使用所需的列排序数据类型初始化表格 new DataTable('#example', { columns: [ null, { orderDataType: 'dom-text-numeric' }, { orderDataType: 'dom-text', type: 'string' }, { orderDataType: 'dom-select' } ] });
除了以上代码之外，以下 Javascript 库文件也加载到此示例中以供使用
下面显示的 HTML 是原始 HTML 表格元素，在 DataTables 增强之前
此示例使用了一些超出库文件（如下）加载的额外 CSS，以便正确显示表格。下面显示了使用的额外 CSS
以下 CSS 库文件加载到此示例中以供使用，以提供表格的样式
此表格通过 Ajax 加载数据。已加载的最新数据显示在下面。随着任何其他数据的加载，此数据将自动更新。
用于执行此表格服务器端处理的脚本显示在下面。请注意，这只是一个使用 PHP 的示例脚本。服务器端处理脚本可以用任何语言编写，使用 DataTables 文档中描述的协议。