搜尋外掛

DataTables 提供兩種不同的搜尋外掛 API，建立一個非常強大且靈活的系統，可根據使用者輸入為您提供幾乎任何搜尋條件的邏輯。

DataTables 支援兩種不同的外掛搜尋方法

基於類型的搜尋
基於列的搜尋

伺服器端處理：如果您使用伺服器端處理（serverSide），DataTables 不會執行任何客戶端搜尋，因此這些外掛不會有任何作用。在伺服器端處理模式下，所有資料操作都由伺服器完成 - 因此您需要在該處實作您所需的任何搜尋邏輯。

基於類型的搜尋

基於類型的搜尋外掛會修改每個單獨儲存格的搜尋資料。可以使用 columns.type 選項將類型套用於欄位，並且可以通過變更要使用的資料來影響排序和搜尋。

例如，一個具有格式化電話號碼的欄位可能會受益於表格使用者能夠以格式化狀態 (555-1234) 或未格式化狀態 (5551234) 搜尋表格中的號碼，使他們可以更自然地輸入搜尋內容。

如何使用

若要使用下方基於欄位 (類型) 的搜尋外掛函式，您需要將其包含在您頁面可用的 Javascript 中，並使用 columns.type 為您想要套用搜尋的欄位設定欄位類型。

瀏覽器

在瀏覽器中載入基於類型的搜尋外掛只需要載入外掛的 Javascript。例如，以下程式碼使用儲存到檔案中的 phoneNumber 外掛

<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.search.html.js"></script>
<script type="text/javascript">
    var table = new DataTable('#myTable', {
        columnDefs: [{ type: 'phoneNumber', target: 0 }],
    });
</script>

可以包含在瀏覽器中的外掛可在我們的 CDN 上取得。請參閱每個外掛的詳細資訊頁面以取得完整的 CDN URL。

ES 模組

搜尋外掛也可以作為 ES 模組使用，可以從 datatables.net-plugins 套件 (.mjs 檔案) 載入。您需要包含外掛所需的檔案。以下我們再次使用 ellipsis 的範例

import DataTable from 'datatables.net';
import 'datatables.net-plugins/filtering/phoneNumber.mjs';

var table = new DataTable('#myTable', {
    columnDefs: [{ type: 'phoneNumber', target: 0 }],
});

CommonJS

如果您使用 CommonJS（即在舊版的 Node 或 Webpack 中），可以載入 .js 檔案，它會自動將外掛新增至 DataTables。與 DataTables 核心和擴充功能一樣，CommonJS 載入器提供了一個您需要使用 window 和 $/jQuery 物件呼叫的函式 - 例如

var $ = require('jquery');
var DataTable = require('datatables.net')(window, $);
require('datatables.net-plugins/filtering/phoneNumber.js')(window, $);

外掛


accent-neutralise	將重音字元替換為非重音對應字元
diacritics-neutralise	將重音字元（變音符號）替換為拉丁字母對應字元
html	使用 DOM 方法移除 HTML
phoneNumber	使電話號碼可以搜尋格式化或未格式化的狀態

基於列的搜尋

基於列的搜尋為您提供對列的完整控制 - 根據您自己的輸入和搜尋邏輯，決定是否將其包含在搜尋結果中。這可以用於複雜的搜尋操作，例如範圍篩選器或模糊比對。

如何使用

若要新增下方基於列的搜尋外掛所提供的功能，您只需要將其包含在您頁面可用的 Javascript 中。在載入 DataTables 函式庫後，但在初始化 DataTable 之前，包含它。

這些篩選器是全域的，並會在 DataTables 套用自己的篩選時套用。

在以下範例中，範圍篩選外掛會儲存到檔案中，並在初始化的 DataTable 中使用。另請注意，事件監聽器附加到兩個 input，這會導致表格重新繪製，進而篩選新的資料

<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.filter.range.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var table = $('#example').DataTable();
         
        /* Add event listeners to the two range filtering inputs */
        $('#min, #max').keyup( function() {
            table.draw();
        } );
    } );
</script>

基於列的搜尋外掛尚未作為 ES 或 CommonJS 模組提供。如果您需要這些模組，請在論壇中聯繫。

外掛


TableTools.ShowSelectedOnly	透過篩選僅顯示選取的列或所有列
range_dates	根據不同欄位中的兩個日期篩選表格
range_numbers	篩選兩個數字之間的資料（包含在內）