欄位選擇器

欄位的選擇器選項。

說明

DataTables 的 columns() 和 column()（也可選用 cells() 和 cell()）方法提供了從表格中選擇欄位的功能。選擇哪些欄位以及選擇器實際如何運作，由這個 column-selector 資料類型控制。

選項

欄位選擇器可以以多種不同的形式給定，以便輕鬆應用於您的資料和使用案例

• 無選擇器 - 選擇所有欄位
• integer - 欄位索引選擇器
• {integer}:visIdx - 欄位可見索引選擇器（例如 3:visIdx）
• {integer}:visible - {integer}:visIdx 的別名。請注意，從 2.1.4 版開始，可以在 :visible 前面使用一般的 DOM 選擇器，以選擇符合給定選擇器的可見欄位。前置數字是一個特殊情況。
• {string}:name - 欄位名稱選擇器，來自 columns.name（例如 salary:name）
• {string}:title - 欄位標題選擇器 - 基於欄位的標題文字進行選擇（例如 My\ Column:title）
• string - jQuery 選擇器
• node - 這可能是下列其中之一
  • 來自欄位標頭的 th / td 儲存格
  • 來自表格主體的 td / td 儲存格（自 1.10.11 版起）
  • 任何具有分配給它的 data-dt-column 屬性或父項的元素（自 1.10.11 版起）。這可以被諸如 FixedColumns 和 Responsive 之類的擴充功能使用，以方便欄位選擇。
• function - 函數選擇器（自 1.10.3 版起）
• jQuery - 欄位標頭節點的 jQuery 物件
• array - 包含上述任何選項組合的陣列

無選擇器

如果未給定選擇器（更具體地說，是 undefined），則會選擇所有欄位。

取得表格中所有欄位的資料

var table = new DataTable('#myTable');
var allData = table.columns().data();

整數

DataTables 在內部使用欄位索引儲存每個欄位，以便快速查詢欄位資訊。當選擇器以整數形式給定時，此值表示欄位資料索引 (columns().indexes() / column().index())。

請注意，這是欄位資料索引，而不是可見索引。資料索引是固定的，不受欄位可見性的影響，而可見索引將隨著欄位可見性的變化而變化（請參閱下文以了解可見索引選擇器）。

欄位資料索引 0 資料

var table = new DataTable('#myTable');
var data = table.column( 0 ).data();

{integer}:visible

欄位的可見索引是考慮隱藏欄位後的索引。當使用事件處理程序且某些欄位被隱藏，或可由終端使用者隱藏時，這可能很有用。此選擇器只是上述 integer 類型的修改，附加了字串 :visible（或 :visIdx）。例如：3:visIdx。

取得點擊的欄位的資料

var table = new DataTable('#myTable', {
    columnDefs: [
        { visible: false, targets: 1 }
    ]
} );

$('#example tbody').on( 'click', 'td', function () {
    var columnData = table
        .column( $(this).index()+':visIdx' )
        .data();
} );

從 DataTables 2.1.4 版開始，此選項已擴充為支援在 :visible 前面使用一般的 DOM 選擇器，以便您僅選擇可見的欄位。您也可以不包含選擇器，僅選擇可見的欄位

// Select columns that are visible and have a class of `important`
table.columns('.important:visible')

// Select all visible columns
table.columns(':visible')

{string}:name

DataTables 提供了透過 columns.name 選項為欄位分配名稱的功能，這對於為欄位提供人類可讀的表示形式非常有用。:name 選擇器提供了根據分配的名稱選擇欄位的功能。

此選擇器只是一個字串（欄位名稱），附加了 :name。例如 salary:name。

請注意，分配的欄位名稱不需要是唯一的（雖然您通常希望它們是唯一的）。如果給定的選擇器與來自相同名稱的多個欄位匹配，則會選擇所有欄位。

取得已命名欄位的資料

var table = new DataTable('#myTable', {
    columns: [
        { name: 'first-name' },
        { name: 'last-name' },
        { name: 'position' },
        { name: 'location' },
        { name: 'salary' }
    ]
} );

// Get salary column data
table.column( 'salary:name' ).data();

字串

當選擇器以字串形式給定時，它會被視為 jQuery 選擇器，該選擇器對表格中欄位標頭的 th 和 td 元素進行操作。

每個欄位只有一個儲存格用作欄位標頭 - 請參閱 orderCellsTop，了解如果表格的 thead 元素中每個欄位標頭有多個可能的儲存格時，DataTables 如何選擇要用於欄位標頭的儲存格。

有關 jQuery 選擇器可用選項的完整資訊，請參閱 jQuery 選擇器文件。

請注意，就像 jQuery 選擇器一樣，當選擇器以字串形式提供時，可以使用逗號分隔表示法（即，僅以逗號分隔）來提供多個選擇器。

依 id 選擇單一欄位

var table = new DataTable('#myTable');
var column = table.column('#column-3');

依類別名稱選擇欄位

var table = new DataTable('#myTable');
var columns = table.columns('.priority');

依內容選擇欄位

var table = new DataTable('#myTable');
var column = table.column(':contains(Salary)');

節點

可以將 th 和 td DOM 元素作為欄位選擇器給定，以便從該 DOM 元素中選擇 DataTabels API 中的欄位（如上所述，此選擇器適用於用於欄位標頭的儲存格，如果有多行，則不一定適用於標頭中的所有儲存格）。

當您只有 DOM 節點作為參考時，例如在事件處理程式中，這對於從欄位中取得資料或執行其他基於欄位的操作非常有用。

取得點擊的欄位的資料

var table = new DataTable('#myTable');

$('#example thead').on( 'click', 'th', function () {
  var columnData = table.column( this ).data();
  // ... do something with `columnData`
} );

函數

為了完全控制選擇哪些欄位，可以提供一個具有您定義的邏輯的函數來執行選擇。該邏輯可以像您希望的那樣簡單或複雜，只要在欄位應包含在選定的結果中時返回 true，否則返回 false 即可。

該函數接收三個參數

1. 欄位索引 - 請參閱 column().index()
2. 欄位資料 - 請參閱 column().data()。請注意，這是資料陣列，每個選定欄位中的每個儲存格都有一個條目。資料使用的是儲存格的原始資料，而不是當您使用 columns.render 時的呈現資料
3. 欄位節點 - 請參閱 column().header()。請注意，這不是表格主體中的儲存格。如果您需要該資訊，請使用 column().nodes()。

該函數會針對每個可以選擇的欄位呼叫一次，基於 selector-modifier 選項，該選項還定義了作為呼叫函數第二個引數傳遞的資料的順序。

取得包含字串 Active 的所有欄位的資料

var table = new DataTable('#myTable');

var active = table
    .columns( function ( idx, data, node ) {
        return $.inArray( 'Active', data ) !== -1 ?
            true : false;
    } )
    .data();

jQuery

與上述 node 類型非常相似（因為 jQuery 物件是 DOM 節點的類陣列列表），可以將 jQuery 執行個體作為欄位選擇器給定，其中 jQuery 選擇的任何節點都與表格標頭儲存格中可用的節點匹配。

請注意，當使用 jQuery 選定的欄位集合和隱藏的欄位時，jQuery 本身不會選擇已隱藏的欄位標頭儲存格（因為 DataTables 在欄位隱藏時會將它們從文件中移除）。為了克服這個問題，請使用上面的 string 選項，該選項不會受到此問題的影響，並允許使用 jQuery 選擇器。

從 jQuery 執行個體中的欄位取得資料

var columns = $('#example thead th.immediate');
var table = new DataTable('#myTable');

var columnData = table.columns( columns ).data();

陣列

可以將上述任何選項的組合作為選擇器一起給定，提供一種選擇多個欄位或混合選擇器類型的方法，只需在陣列中提供您想要的選擇器選項即可。

取得兩個欄位的資料，基於欄位索引

var table = new DataTable('#myTable');
var data = table.columns( [0, 1] ).data();

混合 column-selector 類型 - 索引和類別選擇器

var table = new DataTable('#myTable');
var data = table.columns( [0, '.important'] ).data();