即時 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
此範例中載入以下 CSS 函式庫檔案，以提供表格的樣式
此表格透過 Ajax 載入資料。下面顯示已載入的最新資料。當載入任何其他資料時，此資料將會自動更新。
下面顯示用於執行此表格伺服器端處理的腳本。請注意，這只是一個使用 PHP 的範例腳本。伺服器端處理腳本可以使用任何語言編寫，使用 DataTables 文件中描述的協定。