從渲染器返回 DOM 元素
DataTable 的正交資料功能非常有用，可以針對每個操作調整排序、搜尋和顯示資料。不僅如此，它還可以用於為 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 文件中描述的協定。