捲動和 Bootstrap 標籤頁
此範例示範如何將具有捲動功能的 DataTables 與 Bootstrap 標籤頁（或實際上任何其他在初始化時表格處於隱藏狀態 `display:none` 的方法）一起使用。
這需要特別考慮的原因是，當 DataTable 在隱藏元素中初始化時，瀏覽器沒有任何度量可以提供給 DataTable，這將導致啟用捲動時欄位未對齊。
當表格變為可見時（即具有尺寸時），可以使用 columns.adjust() 方法來修正此未對齊的情況。
此範例示範如何使用 Bootstrap 的 `shown.bs.tab` 事件來觸發此方法呼叫。頁面上可見的表格使用靜態的 $.fn.dataTable.tables() 方法選取，並對它們執行 columns.adjust() 方法。
| 姓名 | 職稱 | 辦公室 | 分機 | 開始日期 | 薪資 |
|---|
| 姓名 | 職稱 | 辦公室 | 分機 | 開始日期 | 薪資 |
|---|
- Javascript
- HTML
- CSS
- Ajax
- 伺服器端腳本
- 註解
以下顯示的 Javascript 用於初始化此範例中顯示的表格
$('button[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) { DataTable.tables({ visible: true, api: true }).columns.adjust(); }); $('table.table').DataTable({ ajax: '../ajax/data/arrays.txt', paging: false, scrollCollapse: true, scrollY: 200 }); // 將搜尋套用至示範的第二個表格 $('#myTable2').DataTable().search('New York').draw();
// 監聽 Bootstrap 標籤頁變更 document.querySelectorAll('button[data-bs-toggle="tab"]').forEach((el) => { el.addEventListener('shown.bs.tab', () => { DataTable.tables({ visible: true, api: true }).columns.adjust(); }); }); new DataTable('table.table', { ajax: '../ajax/data/arrays.txt', paging: false, scrollCollapse: true, scrollY: 200 }); // 將搜尋套用至示範的第二個表格 new DataTable.Api('#myTable2').search('New York').draw();
除了上述程式碼之外，還會載入下列 Javascript 函式庫檔案，以供此範例中使用
以下顯示的 HTML 是原始 HTML 表格元素，在由 DataTables 增強之前
此範例使用除了從函式庫檔案（如下）載入之外的一些額外 CSS，以便正確顯示表格。 以下顯示所使用的額外 CSS
以下載入用於此範例中的 CSS 函式庫檔案，以提供表格的樣式
此表格透過 Ajax 載入資料。 以下顯示已載入的最新資料。當載入任何其他資料時，此資料將自動更新。
以下顯示用於執行此表格伺服器端處理的腳本。請注意，這只是一個使用 PHP 的範例腳本。伺服器端處理腳本可以使用任何語言編寫，使用 DataTables 文件中描述的協定。