responsive.breakpoints

自：Responsive 1.0.0

設定 Responsive 實例的斷點。
請注意 - 此屬性需要 DataTables 的 Responsive 擴充功能。

描述

在啟用 Responsive 的 DataTable 中，欄位的可見性可透過斷點和與這些斷點（以及其他邏輯運算）匹配的類別名稱來控制。這提供了精確控制表格中哪些欄位在每個裝置類型上可見的能力。請參閱 Responsive 手冊以取得更多資訊。

Responsive 實例使用的斷點對於該實例是唯一的（即每個表格），允許在需要時為不同的表格設定不同的斷點。表格在任何一次只能處於單一斷點模式。如果您希望欄位在多個斷點上顯示，則分配給該欄位的類別必須反映這一點（例如，className: 'tablet desktop'）。

DataTable.Responsive.breakpoints 定義的預設斷點為：

[
    { name: 'desktop',  width: Infinity },
    { name: 'tablet-l', width: 1024 },
    { name: 'tablet-p', width: 768 },
    { name: 'mobile-l', width: 480 },
    { name: 'mobile-p', width: 320 }
]

請注意，如果您定義自己的斷點陣列，則斷點的順序並不重要。Responsive 會在使用之前自動將陣列排序為其所需的內部順序。

請注意，與 Responsive 的所有其他組態選項一樣，此選項是 DataTables 預設選項集的擴充功能。此屬性應在 DataTables 初始化物件中設定。

類型

陣列

描述

一個物件陣列，其中每個物件包含兩個描述每個斷點的屬性

name - 斷點名稱，允許類別目標。這可以是單字，或是附加 \-[a-z] 以提供子斷點，類似於預設值，例如允許平板電腦、平板電腦橫向或平板電腦直向斷點。
width - 頁面視窗的寬度（像素），在此寬度下將套用此斷點。給定的值是將套用此斷點的最大大小，並且它將被使用直到找到下一個斷點。例如，如果使用預設斷點（如上），則 tablet-l 斷點將適用於 768 < x <= 1024（其中 x 是視窗寬度）。

預設

值：DataTable.Responsive.breakpoints

Responsive 使用的預設斷點由此物件中定義的靜態陣列定義。如果需要，這提供了輕鬆設定所有表格使用的通用斷點的能力。

範例

在 DataTables 初始化中設定自訂斷點

new DataTable('#myTable', {
	responsive: {
		breakpoints: [
			{ name: 'desktop', width: Infinity },
			{ name: 'tablet', width: 1024 },
			{ name: 'fablet', width: 768 },
			{ name: 'phone', width: 480 }
		]
	}
});

使用預設值設定自訂斷點

DataTable.Responsive.breakpoints = [
	{ name: 'desktop', width: Infinity },
	{ name: 'tablet', width: 1024 },
	{ name: 'fablet', width: 768 },
	{ name: 'phone', width: 480 }
];

new DataTable('#myTable', {
	responsive: true
});