資料重新載入時保留選取
DataTables 有能力透過 rowId 選項，使用資料來源中每列的屬性作為該列的唯一識別符。這通常用於 DataTables 中，將 id 屬性指派給表格中的 tr 元素，但 Select 和其他函式庫也可以使用它，以便在資料重新載入時保留每列的唯一識別符。
Select 會使用此資訊來保留資料重新載入時的列選取狀態。一般來說，如果重新載入表格，每列的狀態都會遺失（因為舊列會被刪除並加入新列），但這可能是不想要的，尤其是在執行頻繁的資料更新時。設定 DataTables 的 rowId 選項將可解決這個問題。
此範例使用列的 extn 屬性作為 rowId 選項（通常會使用資料庫主鍵）。透過 Buttons 擴充功能 也提供了一個重新載入按鈕，當啟用時會呼叫 ajax.reload() 方法。
為了展示 Select 在資料重新載入時保留選取列的能力，請選取一些列，然後按一下「重新載入表格」按鈕。
| 名稱 | 職位 | 辦公室 | 分機 | 開始日期 | 薪資 |
|---|---|---|---|---|---|
| 名稱 | 職位 | 辦公室 | 分機 | 開始日期 | 薪資 |
- Javascript
- HTML
- CSS
- Ajax
- 伺服器端指令碼
- 評論
下面顯示的 Javascript 用於初始化此範例中顯示的表格
var table = $('#example').DataTable({ ajax: '../../../../examples/ajax/data/objects.txt', columns: [ { data: 'name' }, { data: 'position' }, { data: 'office' }, { data: 'extn' }, { data: 'start_date' }, { data: 'salary' } ], layout: { topStart: { buttons: [ { text: 'Reload table', action: function () { table.ajax.reload(); } } ] } }, rowId: 'extn', select: true });
let table = new DataTable('#example', { ajax: '../../../../examples/ajax/data/objects.txt', columns: [ { data: 'name' }, { data: 'position' }, { data: 'office' }, { data: 'extn' }, { data: 'start_date' }, { data: 'salary' } ], layout: { topStart: { buttons: [ { text: 'Reload table', action: function () { table.ajax.reload(); } } ] } }, rowId: 'extn', select: true });
除了上述程式碼外，還會載入下列 Javascript 函式庫檔案，以用於此範例中
以下顯示的 HTML 是原始的 HTML 表格元素，在 DataTables 增強之前
此範例使用了一些額外的 CSS，超出從函式庫檔案（如下）載入的內容，以便正確顯示表格。下面顯示了使用的額外 CSS
載入了下列 CSS 函式庫檔案，以用於此範例中，以提供表格的樣式
此表格透過 Ajax 載入資料。以下顯示已載入的最新資料。當載入任何其他資料時，此資料將自動更新。
以下顯示用於執行此表格伺服器端處理的指令碼。請注意，這只是一個使用 PHP 的範例指令碼。伺服器端處理指令碼可以使用任何語言編寫，並使用 DataTables 文件中描述的協定。