{hero}

search()

自 DataTables 1.10 起

在表格中搜尋資料。

說明

在表格中搜尋資料的能力是 DataTables 概念的核心,因為它允許使用者輕鬆存取資料。此方法提供了透過 API 控制表格全域搜尋的能力。全域搜尋會在所有可搜尋的欄位中執行(請參閱 columns.searchable 以停用特定欄位的搜尋)。如果在任何欄位中找到符合的資料,則會比對整列並顯示在結果集中。可以使用 columns().search()column().search() 方法,在個別欄位上執行搜尋。

DataTables 具有內建的搜尋演算法,稱為「智慧」搜尋,旨在讓終端使用者更容易使用表格資料搜尋。DataTables 中的智慧搜尋提供以下功能

  • 比對不依順序的單字。例如,如果您搜尋 Allan Fife,它會比對包含單字 AllanFife 的列,無論它們在表格中出現的順序或位置為何。
  • 部分單字比對。由於 DataTables 提供即時篩選,並立即回饋給使用者,因此可以在結果集中比對部分單字。例如,All 將比對 Allan
  • 保留文字。DataTables 1.10 新增了透過將搜尋文字以雙引號括起來來搜尋確切片語的功能。例如,"Allan Fife" 將僅比對包含片語 Allan Fife 的文字。它不會比對 Allan is in Fife

DataTables 的智慧搜尋能力是使用正規表示式執行的,並且可以使用此方法的第三個參數啟用或停用。如果您希望使用自訂正規表示式,例如執行整個單字的精確比對,您需要啟用正規表示式選項(第二個參數)並停用智慧搜尋選項(第三個參數),以確保兩者不會衝突。DataTables 提供實用方法 (DataTable.util.escapeRegex()) 來跳脫正規表示式的特殊字元,如果您將使用者輸入與正規表示式混合使用,這會很有用。

請注意,DataTables 中的此搜尋功能實際上在技術上是篩選,因為它是減法的。但是,我們將其稱為搜尋,以避免與 filter() 輔助方法命名衝突。

請注意,此方法僅設定要套用至表格的搜尋 - 它實際上並未執行搜尋。為了讓搜尋執行並顯示結果,請使用 draw() 方法,該方法可以簡單地呼叫為 search() 方法傳回物件的鏈結方法 - 例如 table.search( 'Fred' ).draw();。這是為了提供在執行繪製之前排隊多個變更的能力。

當使用伺服器端處理時,必須在伺服器端新增其他邏輯來處理 regex 搜尋詞彙。此外,由於搜尋功能是基於用戶端,因此無法使用函數搜尋。

類型

function search()

說明

取得目前套用的全域搜尋。如果 API 的內容中有一個以上的表格,將會傳回第一個表格的搜尋詞彙。如果您需要 API 內容中不同表格的搜尋詞彙,請使用 table()

傳回

目前套用的全域搜尋。如果未套用任何搜尋,這可能是空字串。

function search( input [, options] )

說明

設定要在表格上使用的全域搜尋,並設定組態選項。在設定好搜尋詞彙後,呼叫 draw() 來更新表格的檢視。

參數
傳回

DataTables API 執行個體

function search( input [, regex[ , smart[ , caseInsen ]]] )

說明

設定要在表格上使用的全域搜尋。請注意,自 DataTables 2 開始,偏好使用上述簽章,因為它提供其他選項。此簽章會保留以供回溯相容。

參數
傳回

DataTables API 執行個體

範例

使用自訂輸入搜尋表格

let table = new DataTable('#example');

// #myInput is a <input type="text"> element
$('#myInput').on('keyup', function () {
	table.search(this.value).draw();
});

自訂搜尋函數

let table = new DataTable('#example');

table.search((d) => d.includes('My search term')).draw();

// note that the above can also be rewritten as:
table
	.search(function (d) {
		return d.includes('My search term');
	})
	.draw();

自訂 regex 搜尋

let table = new DataTable('#example');

table.search(/\bTerm/i).draw();

相關

以下選項直接相關,也可能在您的應用程式開發中很有用。