responsive.details.renderer
定義用於顯示子資料列的渲染器。
請注意 - 此屬性需要 DataTables 的 Responsive 擴充功能。
說明
Responsive 所顯示的詳細資料列中包含的資訊，是透過此函式建立的。預設情況下，它會建立一個 ul / li 清單，顯示來自隱藏儲存格的資料，您也可以使用其他內建的渲染器，或提供您自己的渲染器。
渲染函式會在表格中顯示詳細資料時執行，並且在表格的欄位可見性變更時執行。
請注意，與 Responsive 的所有其他配置選項一樣，此選項是 預設 DataTables 選項集的擴充功能。此屬性應在 DataTables 初始化物件中設定。
自 v2.1.0 起，Responsive 具有許多內建的渲染函式，可從 DataTable.Responsive.renderer 物件存取。內建的渲染器以函式的形式提供，必須執行並返回所需的渲染器。這提供了將選項傳遞給渲染器的能力。
內建選項包括
listHidden- 在ul/li清單中顯示已隱藏的資料。- 無其他選項
- 預設渲染器
listHiddenNodes- 與listHidden相同，但將 DOM 節點從表格儲存格移動到清單中。如果需要，這對於保留儲存格內容的事件處理程式非常有用。- 無其他選項
tableAll- 在table中顯示所有欄的資料（無論它們是否已隱藏）。- 單一選項：
tableClass- 要套用到建立的表格的類別名稱。
- 單一選項：
如果您希望它們模組化，可以建立其他渲染器並將它們附加到此物件。如果是這樣，請隨時與社群分享它們！
在建立每個要顯示的項目的 HTML 時，最好根據給定的 rowIndex 和 columnIndex 資訊新增 data-dt-row 和 data-dt-column 屬性。這允許將這些元素及其子元素傳遞到 DataTables API 選取器方法 (cell() 例如) 中，並作為 API 的常規部分使用。
類型
function renderer( api, rowIdx, columns )
- 參數
名稱 類型 選填 1 api否 相關表格的 DataTables API 實例
2 rowIdx否 要求渲染器渲染的資料列的資料列索引。使用
row()和 / 或cells()方法從 API 取得有關資料列的資訊，以便可以渲染資訊。3 columns否 自 2.0.0 起：一個物件陣列，其中包含有關 DataTable 中每個欄的資訊。陣列長度與 DataTable 中的欄數完全相等，每個欄都按索引順序由一個 DataTable 表示。此外，陣列中每個物件的結構是
{ className: ..., // string - host column's class name (since Responsive 2.2.4) columnIndex: ..., // integer - column data index (since Responsive 2.0.1) data: "...", // string - cell's value hidden: true / false, // boolean - true if hidden by Responsive - otherwise false rowIndex: ..., // integer - column data index (since Responsive 2.0.2) title: "...", // string - column title }- 傳回
可以傳回兩個值
預設
- 值：
function
函式將在 ul/li 清單中顯示隱藏的資訊。
範例
使用 tableAll 渲染器而不指定類別名稱
new DataTable('#myTable', {
responsive: {
details: {
renderer: DataTable.Responsive.renderer.tableAll()
}
}
});使用 tableAll 渲染器並指定類別名稱
new DataTable('#myTable', {
responsive: {
details: {
renderer: DataTable.Responsive.renderer.tableAll({
tableClass: 'ui table'
})
}
}
});自訂渲染器，它在 HTML 表格中顯示已隱藏的資料
new DataTable('#myTable', {
responsive: {
details: {
renderer: function (api, rowIdx, columns) {
var data = $.map(columns, function (col, i) {
return col.hidden
? '<tr data-dt-row="' +
col.rowIndex +
'" data-dt-column="' +
col.columnIndex +
'">' +
'<td>' +
col.title +
':' +
'</td> ' +
'<td>' +
col.data +
'</td>' +
'</tr>'
: '';
}).join('');
return data ? $('<table/>').append(data) : false;
}
}
}
});