初始化

DataTables 的響應式功能可以透過三種不同的方式啟用

將類別 responsive 新增至 HTML 表格
使用 responsive DataTable 選項
使用 $.fn.dataTable.Responsive 建構函式

類別

若要透過類別名稱在 DataTable 上啟用響應式功能，請加入以下其中一個

responsive，或
dt-responsive

至 HTML 表格的類別清單。例如

<table class="display responsive nowrap" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
        </tr>
    </thead>
    ...
</table>

響應式功能會自動偵測頁面上使用任一類別建立的 DataTable。如果存在這些類別，響應式功能會使用預設組態選項進行初始化。

提供兩個類別名稱作為自動初始化的選項，因為類別 responsive 相對常見，而且可能已在您的 CSS 中定義了一些含義，或者如果正在使用的話，可能已在框架中定義。例如，在 Bootstrap 中，responsive 類別用於執行表格的捲動（也可在 DataTables 中使用 scrollX 選項）。

請注意，在上述範例中，DataTables nowrap 類別也已新增至表格。這對於響應式版面配置特別有用，因為它可以停用表格中文字內容的換行，使文字保持在同一行。若沒有這個類別（或在您自己的表格 CSS 中使用 white-space CSS 選項），瀏覽器會嘗試將表格中的文字摺疊到多行，以減少水平空間。結果是瀏覽器視窗需要小得多，響應式功能才能移除欄位。

請參閱 DataTables 樣式表選項，以取得有關可用選項的更多資訊。

選項

也可以使用 responsive 選項在 DataTable 上啟用響應式功能。除了易於在您的 Javascript 中使用之外，此選項還提供了自訂響應式功能組態選項的功能。

在其最簡單的形式中，可以將 responsive 選項設定為布林值，以指示是否應針對該表格啟用響應式功能

$('#example').DataTable( {
    responsive: true
} );

也可以將其設定為物件，其屬性定義用於執行個體的組態選項。當作為選項給定時，假設響應式功能已針對表格啟用（如果您需要停用它，請使用 false）。可用的完整選項清單已在響應式參考中記錄。

在以下範例中，我們將 responsive 作為物件與 responsive.details 選項組合使用，以停用在子資料列中顯示摺疊詳細資訊的預設行為

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

建構函式

初始化 DataTable 的響應式功能的最後一種方法是使用 $.fn.dataTable.Responsive 建構函式直接初始化執行個體。如果您需要在初始化 DataTable 之後新增響應式功能，並且您無法在那一點之前新增 responsive 類別，這會很有用。

建構函式採用兩個參數

要將響應式功能新增至的 DataTable。這可以是 DataTables API 執行個體、表格的 jQuery 選取器，或是包含表格作為其結果集中唯一節點的 jQuery 物件。
選擇性 - 組態參數。這些參數與 responsive 的選項相同。如果未給定，則會使用預設組態選項。

在以下範例中，我們初始化 DataTable，然後透過使用建構函式方法將響應式功能新增至其中。請注意，您必須包含關鍵字 new 以用於建構函式，因為必須為每個表格建立新的執行個體。

var table = $('#example').DataTable();

new $.fn.dataTable.Responsive( table, {
    details: false
} );