columns.data

自：DataTables 1.10 起

設定欄位資料來源，來自列的資料物件 / 陣列。

描述

此屬性可用於讀取和寫入任何資料來源屬性的資料，包括深層巢狀的物件/屬性。 data 可以透過多種不同的方式給定，這些方式會影響其行為，如下所述。

針對資料點解析的資料（介於此選項和 columns.render 之間）將由 DataTables 用於請求的資料，有三種特殊情況

undefined - 與不存在時相同！
null - 如果使用 columns.render，則傳遞給呈現函式的資料將是該列的原始資料來源。如果沒有呈現器，將使用 columns.defaultContent 值。如果沒有指定預設內容，則對於顯示資料，將使用該列的來源物件；null 將用於所有其他資料類型。
function - 將執行該函式，並使用傳回的值。從 DataTables 1.10.1 起，該函式將在與該列的資料物件相同的範圍中執行。這樣做的結果是，物件實例可以用作列的資料來源。

從 DataTables 2 開始，解析的資料可以是 DOM 節點。當您使用會自行產生 DOM 節點的外部框架時，這非常有用。在這種情況下，不要使用 DataTables 的 columns.render 選項來自訂儲存格的內容 - 而是使用最初建立儲存格的任何方式來執行此操作。

請注意，data 既是 getter 又是 setter 選項。如果您只需要格式化輸出資料，您可能會想使用 columns.render，它只是一個 getter，因此使用起來簡單得多！

從 DataTables 1.10.3 開始，此選項可以與 DOM 來源的資料一起使用，以指示 DataTables 將從每個欄位讀取的資料寫入到資料來源物件中的位置。預設情況下，DataTables 會將資料儲存在陣列中，但使用此選項，您可以提供物件屬性名稱，以描述要使用的物件結構 (範例)。

類型

整數

描述: 被視為資料來源的陣列索引。這是 DataTables 使用的預設值（每個欄位遞增）。

字串

描述

讀取和寫入物件屬性到資料來源和從資料來源讀取。字串中有三個「特殊」選項可用於變更 DataTables 從來源物件讀取資料的方式

. - 點號 JavaScript 表示法。正如您在 JavaScript 中使用 . 來從巢狀物件讀取一樣，data 中指定的選項也可以這樣做。例如：browser.version 或 browser.name。如果您的物件參數名稱包含句點，請使用 \\ 來逸脫它 - 即 first\\.name。
[] - 陣列表示法。DataTables 可以自動合併來自陣列來源的資料，並使用兩個括號之間提供的字元來連結資料。例如：name[, ] 會從來源陣列提供以逗號空格分隔的清單。如果括號之間沒有提供任何字元，則會傳回原始陣列來源。
() - 函式表示法。在參數的末尾新增 () 會執行給定名稱的函式。例如：資料來源上的一個簡單函式的 browser()，巢狀屬性中函式的 browser.version()，甚至是如果呼叫的函式傳回物件，則取得物件屬性的 browser().version。請注意，建議在 render 中使用函式表示法，而不是在 data 中使用，因為它作為呈現器使用起來簡單得多。

null

描述

使用列的原始資料來源，而不是直接從中擷取資料。此動作會影響另外兩個初始化選項

columns.defaultContent - 當將 null 作為 data 選項給定，並且為欄位指定 defaultContent 時，將對儲存格使用 defaultContent 定義的值。
columns.render - 當將 null 用於 data 選項，並且為欄位指定 render 選項時，將使用該列的整個資料來源作為呈現器。

物件

描述

針對 DataTables 請求的不同資料類型使用不同的資料（filter、display、type 或 sort）。物件的屬性名稱是屬性引用的資料類型，可以使用整數、字串或函式來定義值，其規則與 columns.data 通常使用的規則相同。請注意，必須指定 _ 選項。如果您沒有為 DataTables 請求的資料類型指定值，則這是使用的預設值。

舉例來說，您可以使用

"data": {
    "_": "phone",
    "filter": "phone_filter",
    "display": "phone_display"
}

function data( row, type, set, meta )

描述

每當 DataTables 需要設定或取得欄位中的資料時，都會執行給定的函式。

此函式可能會被多次呼叫，因為 DataTables 會針對其需要的不同資料類型呼叫它 - 排序、篩選和顯示。

請注意，僅當從 DOM 讀取列的資料時（也就是說，在預先填入 HTML 表格上初始化表格），DataTables 才會將函式作為setter 呼叫。當資料來自 JavaScript 或 Ajax 時，不會將函式作為 setter 呼叫，假設資料已經是所需格式。

參數

	名稱	類型	可選
1	`row`	`array`、`object`	否
	整列的資料
2	`type`	`字串`	否
	請求儲存格的資料類型。預先定義的類型為 `filter`、`display`、`type` 或 `sort`。
3	`set`	`任何`	否
	如果 `type` 參數為 `set`，則為要設定的值。否則，為 `undefined`。
4	`meta`	`物件`	否
	自 1.10.1 起：一個包含有關所請求儲存格之額外資訊的物件。此物件包含下列屬性 `row` - 所請求儲存格的列索引。請參閱 `row().index()`。 `col` - 所請求儲存格的欄位索引。請參閱 `column().index()`。 `settings` - 所討論表格的 `DataTables.Settings` 物件。如果需要，這可以用於取得 API 實例。

傳回

當 'set' 是呼叫類型時，不需要函式的傳回值，否則傳回值將用於請求的資料。

預設值

自動取得欄位的索引值

範例

從物件讀取表格資料

// JSON structure for each row in this example:
//   {
//      "engine": {value},
//      "browser": {value},
//      "platform": {value},
//      "version": {value},
//      "grade": {value}
//   }
new DataTable('#myTable', {
	ajaxSource: 'sources/objects.txt',
	columns: [
		{ data: 'engine' },
		{ data: 'browser' },
		{ data: 'platform' },
		{ data: 'version' },
		{ data: 'grade' }
	]
});

從深層巢狀物件讀取資訊

// JSON structure for each row:
//   {
//      "engine": {value},
//      "browser": {value},
//      "platform": {
//         "inner": {value}
//      },
//      "details": [
//         {value}, {value}
//      ]
//   }
new DataTable('#myTable', {
	ajaxSource: 'sources/deep.txt',
	columns: [
		{ data: 'engine' },
		{ data: 'browser' },
		{ data: 'platform.inner' },
		{ data: 'details.0' },
		{ data: 'details.1' }
	]
});

將 DOM 來源的表格讀取到資料物件中

$(document).ready(function () {
	$('#example').DataTable({
		columns: [
			{ data: 'name' },
			{ data: 'position' },
			{ data: 'office' },
			{ data: 'age' },
			{ data: 'start_date' },
			{ data: 'salary' }
		]
	});
});

使用 data 作為函式，以提供不同的排序、篩選和顯示資訊。在此案例中，貨幣（價格）

new DataTable('#myTable', {
	columnDefs: [
		{
			targets: 0,
			data: function (row, type, val, meta) {
				if (type === 'set') {
					row.price = val;
					// Store the computed display and filter values for efficiency
					row.price_display = val == '' ? '' : '$' + numberFormat(val);
					row.price_filter =
						val == '' ? '' : '$' + numberFormat(val) + ' ' + val;
					return;
				}
				else if (type === 'display') {
					return row.price_display;
				}
				else if (type === 'filter') {
					return row.price_filter;
				}
				// 'sort', 'type' and undefined all just use the integer
				return row.price;
			}
		}
	]
});

使用預設內容

new DataTable('#myTable', {
	columnDefs: [
		{
			targets: [0],
			data: null,
			defaultContent: 'Click to edit'
		}
	]
});

使用陣列表示法 - 從陣列輸出清單

new DataTable('#myTable', {
	columnDefs: [
		{
			targets: [0],
			data: 'name[, ]'
		}
	]
});

columns.data

描述

類型

整數

字串

null

物件

function data( row, type, set, meta )

預設值

範例

相關

DataTables