版面配置

定義表格控制項元素並將其放置在頁面上。

說明

layout 選項可讓您控制環繞和控制 DataTable 的項目。雖然它提供了廣泛的選項來控制表格周圍的版面配置，但此選項的基本操作非常簡單：使用物件參數名稱來放置控制項，然後使用值來說明應顯示的功能及其組態。

讓我們從預設值開始

{
    topStart: 'pageLength',
    topEnd: 'search',
    bottomStart: 'info',
    bottomEnd: 'paging'
}

您可以看到，在 DataTable 的四個角落，它會放置不同的功能。定義了兩行 - 頂部和底部，每一行都使用 start 和 end。

若要將功能替換為不同的功能 (例如 Buttons 擴充功能)，只需將值設定為與所需功能相符即可。同樣地，如果您想要移除功能，請將其設定為 null。例如，在下方，我們將頂行設定為僅包含 Buttons 擴充功能 (另請注意，底行會自動採用預設值)

{
    topStart: 'buttons',
    topEnd: null
}

位置名稱

如上所見，layout 物件中參數的名稱會告訴 DataTables 將功能放置在哪裡。它由三個部分組成

• top 或 bottom - 用於指示功能是否顯示在表格上方或下方
• 數字 (選用) - 允許在版面配置網格中有多行。如果省略，它會顯示在表格旁邊。
• Start 或 End (選用) - 功能是否應顯示在行的開頭或結尾。如果省略，它將佔用容器的整個寬度。

如果您以正規表示式思考，那麼此定義的正式定義為 (top|bottom)[0-9]*(Start|End)?。

版面配置網格

DataTables 為 layout 建立的版面配置網格如下所示

請記住，版面配置網格中的每個項目都是選用的。將值設定為 null 或 undefined，使其不顯示。

如果您想在視覺上查看網格版面配置的外觀，此範例可能會很有用。

值

到目前為止，我們只討論了功能的定位，但現在讓我們考慮定義功能及其組態的值。功能是一種以某種方式與 DataTable 互動的控制項元素。

layout 中參數的值可以是下列任何一個

• 字串 - 代表 DataTables 或外掛程式提供的功能的字串 (範例)。內建功能有
  • info - 表格資訊摘要
  • pageLength - 頁面長度控制
  • paging - 用於分頁的使用者輸入控制項
  • search - 搜尋輸入框
  • div - 簡單的預留位置元素
• 物件 - 一個純物件，其中參數索引鍵是要使用的功能 (請參閱上面的字串和任何外掛程式)，而值會傳遞到該功能 (範例)。這通常是一個包含選項清單的物件。請注意，可以使用單一物件指定多個功能，但不保證順序。如果您在單一插槽中指定多個控制項，順序通常會很重要 - 在這種情況下，請使用物件陣列。
• 物件 - 一個純物件，其參數名稱為 features，用於控制網格元素的 id 和 class (自 2.1 起 - 範例)。請參閱下方的ID 和類別名稱章節。
• jQuery - 包含要插入的節點的 jQuery 執行個體。
• 節點 - DOM 元素 (範例)。
• 函式 - 一個傳回包含節點的 DOM 元素或 jQuery 執行個體的函式 (範例)。函式會傳遞到 DataTables 設定物件中。
• 物件 - 提供 node() 方法的類別執行個體，且應傳回要插入的節點 (DOM 或 jQuery)。與上方的 函式 選項相同，此方法將傳遞到表格的 DataTables 設定物件中。
• 陣列 - 上述任何選項的陣列，提供將多個項目彼此相鄰顯示的能力 (範例)。
• null - 在此位置不顯示任何內容

請將下列範例視為設定表格控制功能的最常見兩種方式

new DataTable('#example', {
    layout: {
        topStart: 'info',
        topEnd: {
            search: {
                placeholder: 'Search'
            }
        }
    }
});

• 第 3 行：會將 info 資訊功能放置在表格的左上角 (lrt)。
• 第 4-8 行：將 search 輸入放置在右上角 (ltr)，並設定 search.placeholder 選項。

下方和範例的版面配置章節中也提供了更多範例。

ID 和類別名稱

DataTables 會自動將類別名稱指派給版面配置網格，使其適用於您使用的樣式框架，但也可以為建立的元素指定您自己的 ID 和類別名稱 (自 2.1 起)。為此，我們使用 layout 可以接受的第二個 物件 形式 - 具有 features 陣列屬性的物件。

具有 features 屬性的物件可讓您指定列 ID/類別和儲存格 ID/類別以及功能。作為 TypeScript 介面，物件如下所示

interface {
/** Class to apply to the CELL in the layout grid */
className?: string;

/** Id to apply to the CELL in the layout grid */
id?: string;

/** Class to apply to the ROW in the layout grid */
rowClass?: string;

/** Id to apply to the ROW in the layout grid */
rowId?: string;

/** List of features to show in this cell */
features: Features[];
}

如果我們考慮單一字串版面配置 - 例如 top: 'info'，這與

top: {
    features: ['info']
}

相同。同樣地，如果我們有需要設定的功能，例如先前範例中的 search，則可以寫成

topEnd: {
    features: {
        search: {
            placeholder: 'Search'
        }
    }
}

從那裡，您將能夠看到如何使用 id、className 和其他屬性來控制用於網格版面配置的類別/ID。

請注意，如果您使用此表單來控制類別名稱，它將取代預設類別名稱 - 也就是說，您定義的類別是該元素上的唯一類別。

請參閱此範例，以實際示範這些屬性和技術的使用方式。

類型

此選項可使用下列類型

• 物件

預設

DataTables 的預設版面配置如下

{
    topStart: 'pageLength',
    topEnd: 'search',
    bottomStart: 'info',
    bottomEnd: 'paging'
}

請注意，如果您將預設物件中使用的其中一個功能指派到不同的位置，它將不會自動從其原始位置移除。例如，若要僅在 topStart 位置顯示 search 功能，您需要使用

{
    topStart: 'search',
    topEnd: null
}

範例

new DataTable('#myTable', {
	layout: {
		topStart: null
	}
});

// Sets to show paging feature below the table only
DataTable.defaults.layout = {
	topStart: null,
	topEnd: null,
	bottomStart: null,
	bottomEnd: null,
	bottom: 'paging'
};

new DataTable('#myTable');

// Remove the defaults
DataTable.defaults.layout = {
	topStart: null,
	topEnd: null,
	bottomStart: null,
	bottomEnd: null
};

new DataTable('#myTable', {
	top: ['pageLength', 'search'],
	bottom: ['info', 'paging']
});

new DataTable('#example', {
	layout: {
		topStart: {
			pageLength: {
				menu: [ 10, 25, 50, 100 ]
			}
		},
		topEnd: {
			search: {
				placeholder: 'Type search here'
			}
		},
		bottomEnd: {
			paging: {
				numbers: 3
			}
		}
	}
});

new DataTable('#example', {
	layout: {
		top2Start: 'pageLength',
		top2End: 'search',
		topStart: 'info',
		topEnd: 'paging',
		bottomStart: 'pageLength',
		bottomEnd: 'search',
		bottom2Start: 'info',
		bottom2End: 'paging'
	}
});

new DataTable('#example', {
	layout: {
		topStart: function () {
			let toolbar = document.createElement('div');
			toolbar.innerHTML = '<b>Custom tool bar! Text/images etc.</b>';

			return toolbar;
		}
	}
});