渲染器返回 DOM 元素
DataTables 的 正交数据功能 极其有用，可针对各类操作微调排序、搜索和显示数据。此外，还可利用此功能返回 display 数据类型的 DOM 元素，然后该元素将在 DataTable 中显示（这是 DataTables 2 中的新功能）。
这一点非常重要，以便与 Vue 和 React 等框架集成。这些框架期望返回由其控制的 DOM 元素（包括事件侦听器）。
以下示例动态创建了一个 svg 火花线（使用 此出色库），并从渲染函数返回 svg 元素。
| 名称 | 符号 | 价格 | 差值 | 上一次 |
|---|---|---|---|---|
| 名称 | 符号 | 价格 | 差值 | 上一次 |
- Javascript
- HTML
- CSS
- Ajax
- 服务器端脚本
- 注释
以下显示的 Javascript 用于初始化本示例中显示的表格
var stock_data = [ { name: 'ACME Gadgets', symbol: 'AGDTS', values: [ 42, 20, 30, 35, 9, 48, 12, 5] }, { name: 'Spry Media Productions', symbol: 'SPMP', values: [40, 37, 16, 43, 13, 18, 19] }, { name: 'Widget Emporium', symbol: 'WDEMP', values: [35, 40, 6, 15, 48, 16, 44, 49] }, { name: 'Sole Goodman', symbol: 'SGMAN', values: [25, 27, 4, 40, 7, 8, 18, 16] }, { name: 'Stanler Bits and Bobs', symbol: 'SBIBO', values: [13, 25, 13, 38, 40, 34, 40, 47] } ]; var table = $('#example').DataTable({ data: stock_data, columns: [ { data: 'name' }, { data: 'symbol' }, { data: 'values', render: function (data) { return data[data.length - 1].toFixed(2); } }, { data: 'values', render: function (data, type) { // 计算最后两个值之间的差异 var val = ( data[data.length - 1] - data[data.length - 2] ).toFixed(2); var colour = val < 0 ? 'red' : 'green'; return type === 'display' ? '<span style="color:' + colour + '">' + val + '</span>' : val; } }, { data: 'values', render: function (data, type) { if (type === 'display') { // 在火花线中创建 SVG 元素（需要正确的名称空间） var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); $(svg) .addClass('sparkline') .attr({ width: 250, height: 17, 'stroke-width': 3 }); // 使用插件创建线条 sparkline.default(svg, data); return svg; } // 否则返回最后一个值 return data[data.length-1]; } } ] });
var stock_data = [ { name: 'ACME Gadgets', symbol: 'AGDTS', values: [ 42, 20, 30, 35, 9, 48, 12, 5] }, { name: 'Spry Media Productions', symbol: 'SPMP', values: [40, 37, 16, 43, 13, 18, 19] }, { name: 'Widget Emporium', symbol: 'WDEMP', values: [35, 40, 6, 15, 48, 16, 44, 49] }, { name: 'Sole Goodman', symbol: 'SGMAN', values: [25, 27, 4, 40, 7, 8, 18, 16] }, { name: 'Stanler Bits and Bobs', symbol: 'SBIBO', values: [13, 25, 13, 38, 40, 34, 40, 47] } ]; let table = new DataTable('#example', { data: stock_data, columns: [ { data: 'name' }, { data: 'symbol' }, { data: 'values', render: data => data[data.length - 1].toFixed(2) }, { data: 'values', render: function (data, type) { // 计算最后两个值之间的差异 let val = ( data[data.length - 1] - data[data.length - 2] ).toFixed(2); let colour = val < 0 ? 'red' : 'green'; return type === 'display' ? '<span style="color:' + colour + '">' + val + '</span>' : val; } }, { data: 'values', render: function (data, type) { if (type === 'display') { // 创建火花线将驻留在其中的 SVG 元素（需要正确的名称空间） let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.setAttribute('class', 'sparkline'); svg.setAttribute('width', 250); svg.setAttribute('height', 17); svg.setAttribute('stroke-width', 3); // 使用插件创建线条 sparkline.default(svg, data); return svg; } // 否则给出最后一个值 return data[data.length-1]; } } ] });
除了上述代码外，此示例中还会加载以下 Javascript 库文件
下面显示的 HTML 是原始的 HTML 表元素，在 DataTables 对其进行增强之前
此示例使用一些额外的 CSS，除了加载自库文件（如下）之外，为了正确显示此表。使用的额外 CSS 如下所示
.sparkline { stroke: blue; fill: none; }
加载了下述 CSS 库文件，用于对此示例的表进行设置
此表通过 Ajax 加载数据。下面显示了已加载的最新数据。随着加载任何附加数据，此数据将自动更新。
用于对此表执行服务器端处理的脚本显示如下。请注意，这只是一个使用 PHP 的示例脚本。服务器端处理脚本可以采用任何语言编写，并使用 DataTables 文档中描述的协议。