欄位優先順序

Responsive 會自動隱藏表格中的欄位，使表格水平適合指定的空間。這表示可以撰寫一個 HTML 表格，並在不修改表格的情況下，在桌面、平板電腦和行動裝置網頁上都能良好顯示。

當 Responsive 從顯示畫面移除欄位時，預設會從右到左移除（即最右邊的欄位會先被移除）。儘管這是預設行為，您可能會希望為欄位指定自己的欄位可見性優先順序，告訴 Responsive 應該先移除哪些欄位。如果最右邊的欄位包含動作按鈕（編輯/刪除）或包含特別重要的資訊，這會特別有用。

可以在 Responsive 表格中透過以下方式指定欄位的可見性優先順序：

• 使用 columns.responsivePriority 初始化選項
• 在欄位標頭儲存格的 HTML 標籤中使用 data-priority 選項。

優先順序

Responsive 中的優先順序是一個數值，數值越小表示優先順序越高。例如，優先順序為 2 的欄位會先從顯示畫面移除，然後才會移除優先順序為 1 的欄位。

欄位會自動指定優先順序值 10,000，除非另行設定，否則會使用此值。如果多個欄位共用相同的優先順序值，則最右邊的欄位會先被移除。

設定選項

可以使用 columns.responsivePriority 選項來設定優先順序，此選項可以在 DataTables 設定的 columns 或 columnDefs 陣列中定義。請考慮以下設定：

$('#myTable').DataTable( {
    responsive: true,
    columnDefs: [
        { responsivePriority: 1, targets: 0 },
        { responsivePriority: 2, targets: -1 }
    ]
} );

在這裡，最左邊的欄位 (target:0) 被指定為優先順序 1，而最右邊的欄位 (target:-1) 被指定為優先順序 2。表格中的所有其他欄位將使用預設的優先順序 10,000，因此會在這兩個欄位之前被移除。隨著表格寬度變窄，最終只會顯示第一個欄位。

優先順序資料屬性

也可以在 HTML 中使用 data-* 屬性來指定優先順序。這是在 HTML 和 Javascript 之間傳遞資訊的特別方便的方式，因為不需要指定額外的設定選項。只需將 data-priority 屬性新增至欄位標頭儲存格，其值表示要為該欄位指定的優先順序。

考慮以下表格：

<table id="example" class="display nowrap" width="100%">
    <thead>
        <tr>
            <th data-priority="1">First name</th>
            <th>Last name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>E-mail</th>
            <th data-priority="2">Extn.</th>
        </tr>
    </thead>
    <tbody>
        ...
    </tbody>
</table>

這與上面給定的 Javascript 範例完全一致 - 最左邊的欄位優先順序為 1，最右邊的欄位優先順序為 2，其他所有欄位則為預設優先順序。