來自 DOM 的 HTML 實體
此範例展示 SearchPanes 如何與 DOM 中存在的 HTML 實體替換字元 "<"、">" 和 "&" 互動和運作。
| 姓名 | 職位 | 辦公室 | 年齡 | 開始日期 | 薪資 |
|---|---|---|---|---|---|
| 姓名 | 職位 | 辦公室 | 年齡 | 開始日期 | 薪資 |
| Tiger Nixon | 系統架構師 | 愛丁堡 & 巴黎 | 61 | 2011/04/25 | $3,120 |
| Garrett Winters | 主管 | 愛丁堡 | > 63 | 2011/07/25 | $5,300 |
| Ashton Cox | 技術作者 | 舊金山 << | 66 | 2009/01/12 | $4,800 |
- Javascript
- HTML
- CSS
- Ajax
- 伺服器端腳本
- 評論
以下顯示的 Javascript 用於初始化此範例中顯示的表格
$('#example').DataTable({ columnDefs: [ { targets: [2, 3], searchPanes: { show: true } } ], layout: { top1: 'searchPanes' } });
new DataTable('#example', { columnDefs: [ { targets: [2, 3], searchPanes: { show: true } } ], layout: { top1: 'searchPanes' } });
除了上述程式碼，還載入了下列 Javascript 函式庫檔案以在此範例中使用
以下顯示的 HTML 是原始 HTML 表格元素，在被 DataTables 增強之前
此範例使用了一些額外的 CSS (如下) 來正確顯示表格，這些 CSS 不是從函式庫檔案載入的。使用的額外 CSS 如下
載入以下 CSS 函式庫檔案以在此範例中使用，以提供表格的樣式
此表格透過 Ajax 載入資料。以下顯示已載入的最新資料。當載入任何其他資料時，此資料將自動更新。
以下顯示用於此表格的伺服器端處理的腳本。請注意，這只是一個使用 PHP 的範例腳本。伺服器端處理腳本可以使用任何語言編寫，使用 DataTables 文件中描述的協定。