單元格選擇器
單元格的選擇器選項。
描述
DataTables 的 cells()
和 cell()
方法提供了從表格中選擇個別單元格的能力。選擇哪些單元格以及選擇器實際如何運作,由這個 cell-selector
資料類型控制。
選項
單元格選擇器可以用多種不同的形式給出,以便輕鬆應用於您的數據和使用案例
- 無選擇器 - 選擇所有單元格
string
- jQuery 選擇器node
- 這可能是以下其中之一td
/th
單元格- 任何具有
data-dt-row
和data-dt-column
屬性(或父元素)的元素 (自 1.10.11 版本起)。擴充功能(例如 FixedColumns 和 Responsive)可以使用此功能輕鬆選擇列。
function
- 函式選擇器 (自 1.10.3 版本起)jQuery
- 單元格節點的 jQuery 物件object
- DataTables 單元格索引(row
和column
屬性)array
- 包含以上選項任意組合的陣列
無選擇器
如果沒有給定選擇器(更具體來說是 undefined
),則會選擇所有單元格。
取得表格中所有單元格的節點
var table = new DataTable('#myTable');
var cells = table.cells().nodes();
string
當選擇器以字串形式給定時,它會被視為在表格的 tbody
中的 td
和 th
元素上操作的 jQuery 選擇器。有關 jQuery 選擇器可用的完整選項資訊,請參閱 jQuery 選擇器文件。
請注意,就像 jQuery 選擇器一樣,當選擇器以字串形式提供時,可以使用逗號分隔表示法(即僅以逗號分隔)提供多個選擇器。
依 ID 從單個單元格取得資料
var table = new DataTable('#myTable');
var data = table.cell('#cell-2-42').data();
依類別名稱選擇單元格
var table = new DataTable('#myTable');
var cells = table.cells('.priority');
依兩個類別名稱選擇器選擇單元格
var table = new DataTable('#myTable');
var cells = table.cells('.important, .intermediate');
node
td
和 th
DOM 元素可以作為單元格選擇器給出,以從該 DOM 元素中選擇 DataTabels API 中的單元格。當您只有 DOM 節點作為參考時(例如在事件處理常式中),這對於直接從單元格取得資料或執行其他基於單元格的操作非常有用。
取得點擊的單元格的資料
var table = new DataTable('#myTable');
$('#example tbody').on( 'click', 'td', function () {
var cellData = table.cell( this ).data();
// ... do something with `cellData`
} );
Function
為了完全控制選擇哪些單元格,可以提供一個函式,該函式具有您定義的邏輯來執行選擇。該邏輯可以簡單或複雜,如果單元格應包含在選定的結果中,則只需返回 true
,否則返回 false
來執行選擇。
這對於根據單元格包含的資料或基於單元格節點的屬性來查找單元格特別有用。
該函式接收三個參數
- 單元格索引 - 請參閱
cell().index()
- 單元格資料 - 請參閱
cell().data()
。請注意,這是單元格的原始資料,如果您使用columns.render
,則不是呈現的資料 - 單元格節點 - 請參閱
cell().node()
。請注意,如果您使用deferRender
,則可能為null
。
根據 selector-modifier
選項,會為每個可以選擇的單元格呼叫一次該函式,該選項還定義了所呼叫函式的單元格順序。
取得包含 1
的所有單元格的節點
var table = new DataTable('#myTable');
var ones = table
.cells( function ( idx, data, node ) {
return data == 1 ?
true : false;
} )
.nodes();
// Add a class to the cells
ones.to$().addClass('highlight');
jQuery
與上面的 node
類型非常相似(因為 jQuery 物件是 DOM 節點的類陣列列表),可以將 jQuery 實例作為單元格選擇器給出,選取 jQuery 選取的任何節點,並與表格的 tbody
中可用的節點比對。
從 jQuery 實例中的單元格取得資料
var cells = $('td.immediate');
var table = new DataTable('#myTable');
var cellData = table.cells( cells ).data();
## Object
Similar to the `dt-type row-selector` and `dt-type column-selector`, `dt-type cell-selector` can also use indexes to select individual cells, but in this case an object is used which has `row` and `column` properties, each of which is set to the row and column index, respectively, for the cell to be selected.
Although not particularly useful as a primary selector method, this can be very useful for selecting individual cells based on a `dt-api cells()` call - see the example below.
###### Loop over all cells, adding a class if the data for the cell is greater than a given value.
```js
table.cells().every( function () {
if ( this.data() > 10 ) {
$(this.node()).addClass( 'important' );
}
} );
array
以上選項的任意組合可以作為選擇器一起給出,提供一種選擇多個單元格或混合選擇器類型的方法,只需在陣列中提供您需要的選擇器選項即可。
取得兩個單元格的資料(基於 ID)
var table = new DataTable('#myTable');
var data = table.cells( ['#cell-1-42', '#cell-1-91'] ).data();
混合 cell-selector
類型 - ID 和類別選擇器
var table = new DataTable('#myTable');
var data = table.cells( ['#cell-1-42', '.important'] ).data();