responsive.details.display

自：Responsive 2.0.0 起

定義應如何向終端使用者顯示隱藏資訊。
請注意 - 此屬性需要 DataTables 的 Responsive 擴充功能。

描述

Responsive 提供使用 DataTables 子資料列功能 (row().child()) 顯示其隱藏欄位資訊的能力，但您可能希望以不同的方式顯示資料（可能因此您可以使用子資料列進行其他操作，例如編輯） - 此參數提供這種能力。

給定的函式負責顯示和隱藏子資料，通常是在終端使用者要求時（第二個參數）。它可以像預設一樣用於在子資料列中顯示資訊、在模式彈出視窗中、在單獨的資訊元素中，甚至可能開啟一個帶有詳細資訊檢視的新視窗。

Responsive 有一些內建的顯示函式，可以從 $.fn.dataTable.Responsive.display 物件存取 - 內建選項有

childRow - 在子資料列中顯示隱藏資訊，其可見性可由終端使用者切換。
childRowImmediate - 在子資料列中顯示資訊，但不要等待使用者請求顯示資料，而是立即顯示。
modal() - 在模式彈出視窗中顯示資訊 - 請注意，這是一個函式，應在指派時執行（請參閱以下範例）。這樣做是為了允許將選項傳遞到正在使用的模式函式庫中。當與 Bootstrap、Foundation 和 jQuery UI 整合選項一起使用時，Responsive 將使用樣式框架的原生模式顯示，以確保向終端使用者顯示一致的介面。可以傳遞給函式的選項取決於使用的樣式框架
- DataTables、Bootstrap 和 Foundation
- header - 一個函式，應傳回將在模式視窗標題中顯示的字串。傳遞一個單一參數，即顯示其詳細資訊的資料列的 row() 實例。
- jQuery UI
- header - 一個函式，應傳回將在模式視窗標題中顯示的字串。傳遞一個單一參數，即顯示其詳細資訊的資料列的 row() 實例。
- dialog - 由 jQuery UI 函式庫定義的對話方塊設定控制選項的物件。

類型

函式 display( row, update, render )

參數

	名稱	類型	可選
1	`row`	`DataTables.Api`	否
	所討論表格的 DataTables API 實例，該實例預先填入正在處理的資料列 - 即 `row()` 的結果。
2	`update`	`布林值`	否
	此參數用於通知函式觸發函式呼叫的原因 `true` - 這是由欄位可見性變更、重新繪製表格或不是使用者明確啟用資料列的其他操作引起的自動更新。 `false` - 終端使用者觸發資料列。如果隱藏的詳細資訊可以顯示和隱藏，這應該類似於切換；如果只能從資料列顯示（例如在模式視窗中），則應為顯示動作。
3	`render`	`函式`	否
	要顯示的資料 - 這被給定為一個函式，因此它只會在需要時執行（也就是說，如果顯示函式只是要隱藏它，則收集要顯示的資料是沒有意義的）。此函式傳回的字串是 `responsive.details.renderer` 函式給定的字串。它不接受輸入參數。

傳回

布林值

如果顯示函式已顯示隱藏的資料，則傳回 true，否則傳回 false。此資訊用於觸發事件，指示 Responsive 是否已顯示或隱藏資訊。如果傳回 undefined，則不會觸發任何事件。

預設

值：DataTable.Responsive.display.childRow

範例

使用 childRowImmediate 顯示選項

new DataTable('#myTable', {
	responsive: {
		details: {
			display: DataTable.Responsive.display.childRowImmediate,
			type: ''
		}
	}
});

使用沒有任何選項的 modal

new DataTable('#myTable', {
	responsive: {
		details: {
			display: DataTable.Responsive.display.modal()
		}
	}
});

使用 modal 指定標題

new DataTable('#myTable', {
	responsive: {
		details: {
			display: DataTable.Responsive.display.modal({
				header: function (row) {
					var data = row.data();
					return 'Details for ' + data.clientName;
				}
			})
		}
	}
});