columns().search()
在選定的欄位中搜尋資料。
描述
雖然 search() 提供了在整個表格中進行全域搜尋的功能，但這個方法及其單數對應方法，提供了在特定欄位上搜尋資料的功能。
DataTables 沒有內建任何欄位搜尋控制項，因為欄位特定資料的搜尋方式太多種，但是這個方法讓新增自訂欄位搜尋控制項變得超級容易。下面的範例展示了它可能的使用方式。
DataTables 有一個內建的搜尋演算法，稱為「智慧」搜尋，其設計目的是讓終端使用者能夠輕鬆搜尋表格資料。智慧搜尋是使用正規表示式執行的，因此如果您使用正規表示式搜尋（此方法的第二個參數），則必須考慮這一點。有關 DataTables 中智慧搜尋的完整描述，請參閱 search() 的文件。
請注意，DataTables 中的搜尋功能實際上在技術上是一種篩選，因為它是減法的。但是，我們將其稱為搜尋，以避免與 filter() 輔助方法產生名稱重疊。
請注意，此方法設定搜尋僅套用至表格 - 它實際上不會執行搜尋。為了執行搜尋並顯示結果，請使用 draw() 方法，它可以簡單地作為 columns().search() 方法傳回的物件的鏈式方法呼叫 - 例如 table.columns( [0, 1] ).search( 'Fred' ).draw();。這是為了在執行繪製之前能夠排隊多個變更。
類型
function column().search( input [, options] )
- 描述
設定要用於所選欄位的搜尋詞彙，以及設定選項。設定好搜尋詞彙後，呼叫
draw()以更新表格的視圖。- 參數
名稱 類型 選用 1 input否 要套用至欄位的搜尋。
從 DataTables 2 開始，此參數可以指定為正規表示式或函式。
如果使用正規表示式，則提供的資料是相關欄位中儲存格的搜尋資料。
如果是函式，則會為每一列呼叫該函式，並傳入兩個參數；第一個是正在搜尋的列/欄中儲存格的搜尋資料，第二個是該列的原始資料物件。應該傳回布林值：
true表示保留該列，false表示篩選掉該列。請注意，如果為此參數提供了正規表示式或函式，則會忽略下列參數。
2 options否 搜尋執行方式的設定選項。請參閱
DataTables.SearchOptions以取得所有選項的描述。如果這裡沒有提供選項，則將使用先前搜尋設定的值。- 傳回
DataTables API 實例
function columns().search( input [, regex[ , smart[ , caseInsen ]]] )
- 描述
從選取器設定欄位的搜尋詞彙。請注意，這實際上並不會執行搜尋，而是將其排入佇列 - 使用
draw()來執行搜尋並顯示結果。- 參數
名稱 類型 選用 1 input否 要套用的搜尋詞彙。有關詳細資訊，請參閱上述簽章描述中的
input參數。2 regex是 - 預設值：false 視為正規表示式 (
true) 或否 (預設值，false)。3 smart是 - 預設值：true 執行智慧搜尋 (預設值，
true) 或否 (false)。有關智慧篩選的完整描述，請參閱search()。請注意，為了執行智慧搜尋，DataTables 使用正規表示式，因此如果使用此方法的第二個參數啟用正規表示式，您可能需要停用智慧搜尋，否則這兩個正規表示式可能會衝突並導致非預期的結果。
4 caseInsen是 - 預設值：true 執行不區分大小寫的匹配 (預設值，
true) 或否 (false)。- 傳回
DataTables API 實例
範例
對多個欄位套用搜尋
var table = new DataTable('#myTable');
table
.columns('.status')
.search('Important')
.draw();為每個欄位建立一個文字 input 搜尋。請注意，此範例會執行部分單字匹配和智慧搜尋。
// Setup - add a text input to each footer cell
$('#example tfoot th').each(function () {
var title = $('#example thead th')
.eq($(this).index())
.text();
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
});
// DataTable
var table = new DataTable('#myTable');
// Apply the filter
table.columns().every(function () {
var column = this;
$('input', this.footer()).on('keyup change', function () {
column.search(this.value).draw();
});
});為每個具有 select-filter 類別的欄位建立搜尋。
var table = new DataTable('#myTable');
table.columns('.select-filter').every(function () {
var that = this;
// Create the select list and search operation
var select = $('<select />')
.appendTo(this.footer())
.on('change', function () {
that.search($(this).val(), { exact: true }).draw();
});
// Get the search data for the first column and add to the select list
this.cache('search')
.sort()
.unique()
.each(function (d) {
select.append($('<option value="' + d + '">' + d + '</option>'));
});
});相關內容
以下選項直接相關，也可能在您的應用程式開發中很有用。