columns.render

自：DataTables 1.10 起

呈現（處理）資料以供表格中使用。

描述

此屬性將修改 DataTables 從資料來源讀取時用於各種操作的資料。與columns.data類似，此選項可以多種不同的方式指定，以影響其行為，如下所述。

columns.render選項傳回的資料（無論是以函數、整數或字串形式使用）是 DataTables 將用於所請求資料類型的值（這稱為解析資料）。DataTables 為其不同操作請求不同資料的能力稱為正交資料，並允許將相同資料的不同形式用於不同的操作（例如，日期可能以格式化的形式提供給終端使用者進行顯示和搜尋，但以整數形式進行排序）。

columns.render可以解析為四個特殊值

undefined - 將使用columns.defaultContent值。如果未指定預設內容，則會產生錯誤。
null - 將使用columns.defaultContent值。如果未指定預設內容，則對於顯示資料將使用空字串。null 將用於所有其他資料類型。
function - 將執行函數並使用傳回值。自 DataTables 1.10.1 起，函數將在與該行的資料物件相同的範圍中執行。結果是可以將物件實例用作該行的資料來源。請參閱以下範例，了解如何將實例與 DataTables 一起使用。
node 2.0 - 當請求 display 資料類型時，您可以傳回要顯示在表格儲存格中的 DOM 節點。請務必注意，所有其他資料類型都應傳回字串或數值，以便 DataTables 可以對其進行操作（例如，搜尋、排序和類型偵測需要 DOM 節點以外的資料！）。

陣列存取

當以字串形式使用時（請參閱下文），此選項可用於從陣列中取得多個資料點，或僅存取陣列中的一個元素。如果您希望存取行資料物件中的陣列資料，請務必了解這兩種形式之間的差異。

使用陣列中的一個或多個屬性 - 使用 [] 表示法
僅從陣列中取得單一元素 - 使用點表示法 - 例如，使用 .0 存取陣列中的第一個元素。

例如，考慮以下資料結構

"access": [
  { "id": "1", "name": "Printer" },
  { "id": "3", "name": "Desktop" },
  { "id": "4", "name": "VMs" }
]

若要在單一儲存格中顯示陣列中物件的 name 屬性，請使用 access[, ].name - 這會串連以 , 分隔的名稱 - 例如，在本例中，結果會是 Printer, Desktop, VMs。

若要存取陣列中的單一屬性，請使用 .{index}。再次使用上述 JSON，若要僅顯示存取陣列中的第一個名稱，請使用 access.0.name - 例如，在本例中，結果會是 Printer。

類型

整數

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

字串

描述

從資料來源讀取物件屬性。字串中可以使用三個「特殊」選項來變更 DataTables 從來源物件讀取資料的方式

. - 點 JavaScript 表示法。就像在 JavaScript 中使用 . 從巢狀物件讀取一樣，您也可以使用 data 中指定的選項。例如：browser.version 或 browser.name。如果您的物件參數名稱包含句點，請使用 \\ 跳脫它 - 即 first\\.name。
[] - 陣列表示法。DataTables 可以自動組合來自陣列來源的資料，並使用兩個方括號之間提供的字元加入資料。例如：name[, ] 會從來源陣列提供逗號空格分隔的清單。如果方括號之間未提供任何字元，則會傳回原始陣列來源。如需陣列存取的詳細資訊，請參閱上文。
() - 函數表示法。在參數結尾新增 () 會執行給定名稱的函數。例如：資料來源上的簡單函數使用 browser()、巢狀屬性中的函數使用 browser.version()，甚至如果所呼叫的函數傳回物件，則使用 browser().version 取得物件屬性。請注意，建議在 columns.render 中使用函數表示法，而不是在 columns.data 中使用，因為它作為呈現器使用時更簡單。

物件

描述

針對 DataTables 請求的不同資料類型（filter、display、type 或 sort）使用不同的資料。物件的屬性名稱是該屬性所指的資料類型，並且可以使用與columns.render通常相同規則的整數、字串或函數來定義值。

請注意，可以選擇性地指定 _ 選項。如果您沒有為 DataTables 請求的資料類型指定值，則這是要使用的預設值。如果沒有為 DataTables 請求的資料類型指定選項，且未指定 _ 選項，則會使用columns.data選項指向的資料。

例如，您可能會使用

"data": "phone",
"render": {
    "_": "plain",
    "filter": "filter",
    "display": "display"
}

陣列

描述

DataTables 有許多內建輔助呈現函數，可用於執行基本格式設定。這些輔助程式可以從 $.fn.dataTable.render 存取，並解析為將用於資料呈現的函數（請參閱下文）。當您使用純 JavaScript 定義欄位時，這非常有效，但如果您希望使用 JSON 定義它們，由於 JSON 中無法定義函數，我們需要不同的方法 - 陣列值提供了這種能力。

陣列的第一個元素應該是一個包含呈現函數名稱的字串。然後，陣列的其餘元素會傳遞至指定的呈現函數。

例如，您可能會使用格式設定來存取 number 格式設定函數

'data': 'cost',
'render': ['number', ',', '.', 0, '$']

這與

data: 'cost',
render: DataTable.render.number( ',', '.', 0, '$' )

function render( data, type, row, meta )

描述

如果提供函數，則每當 DataTables 需要取得欄位中的儲存格資料時，就會執行該函數。請注意，此函數可能會被呼叫多次，因為 DataTables 會針對其需要的不同資料類型（排序、篩選和顯示）呼叫它。

參數

	名稱	類型	選用
1	`data`	`Any`	否
	儲存格的資料（基於 `columns.data`）
2	`type`	`字串`	否
	要求的類型呼叫資料。這用於DataTables 的正交資料支援。此值將是其中之一 `filter`：取得 DataTables 應用於篩選此儲存格的值。 `display`：要在表格中顯示的值。 `type`：用於類型偵測的值。這通常應該與 `sort` 值相符 - 請參閱類型偵測外掛程式文件。 `sort`：取得要用於排序此儲存格的資料 - 傳回的值通常應該是數字或字串，但可以使用自訂外掛程式 - 請參閱外掛程式文件。請注意，出於歷史原因，此值為 `sort`（而不是與 API 其餘部分更一致的 `order`）。 `undefined`：取得儲存格的原始資料（即未修改）。自訂值：外掛程式（例如 Responsive（透過其`responsive.orthogonal`選項）和 Buttons（`buttons.exportData()`））可以請求開發人員指定的自訂資料類型。如果您想將特定資料傳送至特定擴充套件，這會很有用。另請參閱 `cell().render()` 方法，該方法可用於在任何任意時間執行給定的呈現方法。
3	`row`	`Any`	否
	該列的完整資料來源 (非基於 `columns.data`)
4	`meta`	`物件`	否
	自 1.10.1 版本起：一個包含關於被請求單元的額外資訊的物件。此物件包含以下屬性： `row` - 被請求單元的列索引。請參閱 `row().index()`。 `col` - 被請求單元的欄索引。請參閱 `column().index()`。 `settings` - 相關表格的 `DataTables.Settings` 物件。如果需要，可以使用此物件獲取 API 實例。

回傳值

該函數的回傳值將會被用作被請求的資料。

範例

從物件陣列建立逗號分隔的清單

new DataTable('#myTable', {
	ajaxSource: 'sources/deep.txt',
	columns: [
		{ data: 'engine' },
		{ data: 'browser' },
		{
			data: 'platform',
			render: '[, ].name'
		}
	]
});

以物件形式，針對不同類型提取不同的資料

// This would be used with a data source such as:
//   { "phone": 5552368, "phone_filter": "5552368 555-2368", "phone_display": "555-2368", ... }
// Here the `phone` integer is used for sorting and type detection, while `phone_filter`
// (which has both forms) is used for filtering for if a user inputs either format, while
// the formatted phone number is the one that is shown in the table.
new DataTable('#myTable', {
	columnDefs: [
		{
			targets: 0,
			data: null, // Use the full data source object for the renderer's source
			render: {
				_: 'phone',
				filter: 'phone_filter',
				display: 'phone_display'
			}
		}
	]
});

如上，將 phone 資訊作為一個物件

// This would be used with a data source such as:
//   "phone": { "plain": 5552368, "filter": "5552368 555-2368", "display": "555-2368" }
new DataTable('#myTable', {
	columnDefs: [
		{
			targets: 0,
			data: 'phone',
			render: {
				_: 'plain',
				filter: 'filter',
				display: 'display'
			}
		}
	]
});

使用函數來從資料來源建立連結

new DataTable('#myTable', {
	columnDefs: [
		{
			targets: 0,
			data: 'download_link',
			render: function (data, type, row, meta) {
				return '<a href="' + data + '">Download</a>';
			}
		}
	]
});

對於長字串顯示省略符號

new DataTable('#myTable', {
	columnDefs: [
		{
			targets: 4,
			data: 'description',
			render: function (data, type, row, meta) {
				return type === 'display' && data.length > 40
					? '<span title="' + data + '">' + data.substr(0, 38) + '...</span>'
					: data;
			}
		}
	]
});

使用物件實例作為列的資料來源

function Person(name, age, position) {
	this._name = name;
	this._age = age;
	this._position = position;

	this.name = function () {
		return this._name;
	};

	this.age = function () {
		return this._age;
	};

	this.position = function () {
		return this._position;
	};
}

$(document).ready(function () {
	var table = $('#example').DataTable({
		columns: [
			{ data: null, render: 'name' },
			{ data: null, render: 'age' },
			{ data: null, render: 'position' }
		]
	});

	table.row.add(new Person('Airi Satou', 33, 'Accountant'));
	table.row.add(
		new Person('Angelica Ramos', 47, 'Chief Executive Officer (CEO)')
	);
	table.row.add(new Person('Ashton Cox', 66, 'Junior Technical Author'));
	table.draw();
});

columns.render

描述

陣列存取

類型

整數

字串

物件

陣列

function render( data, type, row, meta )

範例

相關

DataTables