選項

DataTables 的 大量選項可用於客製化其介面的呈現方式,以及提供給終端使用者的功能。這是透過其設定選項來完成的,這些選項在初始化時設定。

DataTables 擴充功能也各自提供可以在 DataTables 設定物件中設定的選項。

設定選項

DataTables 的設定是透過將您想要定義的選項作為物件傳遞到 DataTables 建構子中來完成。例如:

$('#example').DataTable( {
    paging: false
} );

這會使用 paging 選項來停用表格的分頁功能。

假設您想要在表格中啟用捲動,您將使用 scrollY 選項。

$('#example').DataTable( {
    scrollY: 400
} );

擴展一下,您可以將多個選項合併到一個物件中。在本例中,我們啟用捲動並停用分頁。

$('#example').DataTable( {
    paging: false,
    scrollY: 400
} );

傳遞的物件只是一個標準的 Javascript 物件,可以像這樣處理。隨意新增您想要的選項!

有關 DataTables 可用的完整設定選項範圍,請參閱本網站的選項參考章節。

非 jQuery 選項

如果您透過 DataTables 1.11 中可用的 new DataTable() 選項初始化 DataTables,您可以使用建構子的第二個參數傳遞設定選項。

new DataTable( '#example', {
    paging: false,
    scrollY: 400
} );

HTML 5 資料屬性

v1.10.5 起,DataTables 也可以使用從 HTML5 data-* 屬性讀取的初始化選項。這提供了一種直接在您的 HTML 中設定選項的機制,而不是使用 Javascript(如上所述)。例如,考慮以下表格

<table data-order='[[ 1, "asc" ]]' data-page-length='25'>
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th data-class-name="priority">Salary</th>
        </tr>
    </thead>
</table>

當 DataTables 在此表格上初始化時,它會將 pageLength 設定為 25,自動依第二欄排序 (order),並在表格的最後一欄上設定類別名稱 (columns.className)。

使用 data-* 屬性作為初始化選項時,有兩個重點需要考慮:

  • jQuery 會自動將破折號字串轉換為 DataTables 使用的駝峰式命名法(例如,對 pageLength 使用 data-page-length)。
  • 如果在使用屬性內的字串時,必須使用雙引號括住(因此整個屬性使用單引號)。這是 jQuery 由於 JSON 資料處理的另一個要求。

常用選項

您可能會發現一些特別有用的選項:

設定預設值

當在多個 DataTables 的專案上時,將初始化預設值設定為常用值通常很有用(例如,您可能希望將 dom 選項設定為一個通用值,以便所有表格都具有相同的版面配置)。這可以使用 $.fn.dataTable.defaults 物件完成。此物件採用與 DataTables 初始化物件相同的所有參數,但在這種情況下,您正在設定所有未來 DataTables 初始化的預設值。

在本範例中,我們預設停用了 DataTables 的搜尋和排序功能,但當表格初始化時,會初始化為啟用排序(覆寫預設值)。

// Disable search and ordering by default
$.extend( $.fn.dataTable.defaults, {
    searching: false,
    ordering:  false
} );

// For this specific table we are going to enable ordering
// (searching is still disabled)
$('#example').DataTable( {
    ordering: true
} );

擴充功能

許多 DataTables 擴充功能也可以透過 DataTables 設定物件進行設定,初始化擴充功能並根據需要設定。可用屬性取決於使用的擴充功能,且必須載入擴充功能 Javascript,這些選項才能運作。

例如,考慮 Select 擴充功能,它為終端使用者提供了動態選擇表格中的列、欄和儲存格的能力。它提供了可以設定為 true 以啟用選擇的 select 選項。

$('#myTable').DataTable( {
    select: true
} );

select 選項也可以作為物件給定,以便對選擇選項進行精細控制,當然也可以與其他 DataTables 選項組合使用。

選項參考提供了 DataTables 和擴充功能的所有選項的可搜尋清單。