Ajax 來源資料

DataTables 具有從幾乎任何可以透過 Ajax 取得的 JSON 資料來源讀取資料的能力。在最簡單的形式中,可以透過將 ajax 選項設定為 JSON 資料來源的位址來完成。

ajax 選項也允許更進階的配置,例如變更 Ajax 請求的方式。請參閱 ajax 文件以及 其他 Ajax 範例 以取得更多資訊。

下面的範例顯示 DataTables 如何從陣列載入表格的資料作為資料來源(也可以透過 columns.data 選項使用物件參數)。

姓名 職位 辦公室 分機 開始日期 薪資
姓名 職位 辦公室 分機 開始日期 薪資
  • Javascript
  • HTML
  • CSS
  • Ajax
  • 伺服器端腳本
  • 註解

下面顯示的 Javascript 用於初始化此範例中顯示的表格

$('#example').DataTable({ ajax: '../ajax/data/arrays.txt' });
new DataTable('#example', { ajax: '../ajax/data/arrays.txt' });

除了上述程式碼外,還會載入以下 Javascript 函式庫檔案,以便在此範例中使用

    下面顯示的 HTML 是原始 HTML 表格元素,在 DataTables 增強之前

    此範例除了從函式庫檔案載入的 CSS(如下所示)外,還使用了一些額外的 CSS,以便正確顯示表格。使用的額外 CSS 如下所示

    以下 CSS 函式庫檔案會載入在此範例中使用,以提供表格的樣式

      此表格透過 Ajax 載入資料。下面顯示已載入的最新資料。當載入任何額外資料時,此資料將自動更新。

      下面顯示用於執行此表格伺服器端處理的腳本。請注意,這只是一個使用 PHP 的範例腳本。伺服器端處理腳本可以使用任何語言編寫,使用 DataTables 文件中描述的協定

      其他範例