buttons.buttons.split

自：Buttons 3.0.0

分割下拉選單按鈕。
請注意 - 此屬性需要 DataTables 的 Buttons 擴展功能。

描述

此選項允許所有 DataTables 按鈕使用分割按鈕功能。

要實作分割按鈕，只需擴展任何現有的按鈕類型，以包含 buttons.buttons.split 設定選項，或將其包含在您的自訂按鈕初始化中。此選項的值是一個陣列，其中包含要新增為輔助按鈕的其他按鈕。此陣列中的按鈕可以與 buttons.buttons 選項相同的形式宣告，請閱讀該文件以取得完整詳細資訊。

自 Buttons 2.0.0 起，可以在集合中新增自訂 HTML。只需將包含 HTML 的字串包含在 buttons.buttons.split 陣列中，它將按該順序插入到集合彈出視窗中。此範例顯示如何使用此功能來建立更強大的彈出視窗。

注意：在建立樣式整合時，Bulma 不支援分割按鈕下拉選單。因此，Bulma 不支援分割按鈕。如果 Bulma 開始支援分割按鈕，此功能將在未來更新。

類型

陣列

描述: 此陣列包含要新增為輔助按鈕的其他按鈕，這些按鈕顯示在彈出視窗中。此陣列中的按鈕可以與 buttons.buttons 選項相同的形式宣告，請閱讀該文件以取得完整詳細資訊。

預設值

值：undefined

範例

用於列印選項的分割下拉選單按鈕

new DataTable('#myTable', {
	layout: {
		topEnd: {
			buttons: [
				{
					extend: 'csv',
					split: ['pdf', 'excel']
				}
			]
		}
	}
});

具有自訂按鈕的分割下拉選單按鈕

new DataTable('#myTable', {
	layout: {
		topEnd: {
			buttons: [
				{
					text: 'High priority',
					action: function () {
						/* ... */
					},
					split: [
						{
							text: 'Medium priority',
							action: function () {
								/* ... */
							}
						},
						{
							text: 'Low priority',
							action: function () {
								/* ... */
							}
						}
					]
				}
			]
		}
	}
});

具有自訂按鈕和內建按鈕組合的分割下拉選單按鈕

new DataTable('#myTable', {
	layout: {
		topEnd: {
			buttons: [
				{
					text: 'High priority',
					action: function () {
						/* ... */
					},
					split: [
						'pdf',
						{
							text: 'Medium priority',
							action: function () {
								/* ... */
							}
						},
						{
							text: 'Low priority',
							action: function () {
								/* ... */
							}
						}
					]
				}
			]
		}
	}
});

彈出視窗內的自訂 HTML

new DataTable('#myTable', {
	layout: {
		topEnd: {
			buttons: [
				{
					extend: 'collection',
					className: 'custom-html-collection',
					buttons: [
						'<h3>Export</h3>',
						'pdf',
						'csv',
						'excel',
						'<h3 class="not-top-heading">Column Visibility</h3>',
						'colvis',
						'colvis'
					]
				}
			]
		}
	}
});