SearchBuilder 外掛程式

SearchBuilder 預設提供的篩選方法已經非常實用，但如果您想新增自己的篩選方法或修改現有的條件呢？這可以透過建立外掛程式來完成。

必要參數

當您為 SearchBuilder 建立外掛程式時，您會根據資料類型（columns.type），將一個物件新增到 searchBuilder.conditions 物件中，以便外掛程式在適當時機被套用。您的自訂外掛程式物件中必須定義以下所有屬性：

• searchBuilder.conditions[type].conditionName - 定義條件的名稱，該名稱會顯示在條件選取器中。
• searchBuilder.conditions[type].init - 此函式用於初始化您的外掛程式所需的任何 jQuery 元素，例如 select2 元素。
• searchBuilder.conditions[type].inputValue - 此函式用於從在 init 中初始化的 jQuery 元素中提取用於比較的值。
• searchBuilder.conditions[type].isInputValid - 此函式用於決定是否要將條件包含在搜尋查詢中。例如，預設情況下，在選取值之前，不應包含該條件。
• searchBuilder.conditions[type].search - 此函式用於決定在套用篩選器後是否應包含表格中的列。

在初始化期間定義

舉例來說，假設您需要為 num 類型建立一個條件，該條件檢查 num 是否可以被使用者輸入的值整除。我們將這個條件稱為「倍數」。首先，我們必須在 SearchBuilder 配置中新增到 num 條件中，如下所示。

$('#myTable').DataTable( {
    searchBuilder:{
        conditions:{
            num:{
                multipleOf: {
                    ...
                }
            }
        }
    }
})

我們希望我們的條件在下拉式選單中顯示為 倍數，因此我們將 searchBuilder.conditions[type].conditionName 屬性設定為 '倍數'，如下所示（為了簡潔起見，這裡只顯示外掛程式物件）：

multipleOf: {
    conditionName: 'Multiple Of',
    ...
}

接下來，我們希望使用者能夠輸入任何他們想要的值，因此我們將 searchBuilder.conditions[type].init 函式來初始化一個 input 元素。有關如何執行此操作的深入說明，請參閱這裡

我們在 searchBuilder.conditions[type].init 函式中執行此操作，如下所示。

multipleOf: {
    conditionName: 'Multiple Of',
    init: function (that, fn, preDefined = null) {
        var el =  $('<input/>').on('input', function() { fn(that, this) });

        if (preDefined !== null) {
            $(el).val(preDefined[0]);
        }

        return el;
    },
    ...
}

下一個需要新增的屬性是 searchBuilder.conditions[type].inputValue。此函式會從我們剛建立的 jQuery 元素中提取值，並將其傳回以用於搜尋。有關如何執行此操作的深入說明，請參閱這裡

multipleOf: {
    conditionName: 'Multiple Of',
    init: function (that, fn, preDefined = null) {
        var el =  $('<input/>').on('input', function() { fn(that, this) });

        if (preDefined !== null) {
            $(el).val(preDefined[0]);
        }

        return el;
    },
    inputValue: function (el) {
        return $(el[0]).val();
    }
    ...
}

接下來是 searchBuilder.conditions[type].isInputValid 函式。此函式傳回一個布林值，指示是否應將條件包含在搜尋中。我們希望只有在輸入元素中存在值時才包含條件。有關如何執行此操作的深入說明，請參閱這裡

multipleOf: {
    conditionName: 'Multiple Of',
    init: function (that, fn, preDefined = null) {
        var el =  $('<input/>').on('input', function() { fn(that, this) });

        if (preDefined !== null) {
            $(el).val(preDefined[0]);
        }

        return el;
    },
    inputValue: function (el) {
        return $(el[0]).val();
    },
    isInputValid: function (el, that) {
        return $(element[0]).val().length !== 0;
    },
    ...
}

最後，我們需要提供搜尋函式，該函式將確定在 searchBuilder.conditions[type].isInputValid 允許條件的情況下，是否應將該列包含在篩選器的結果中。有關如何執行此操作的深入說明，請參閱這裡

$('#myTable').DataTable( {
    dom: 'Qlfrtip',
    searchBuilder:{
        conditions:{
            num:{
                multipleOf: {
                    conditionName: 'Multiple Of',
                    init: function (that, fn, preDefined = null) {
                        var el =  $('<input/>').on('input', function() { fn(that, this) });

                        if (preDefined !== null) {
                            $(el).val(preDefined[0]);
                        }

                        return el;
                    },
                    inputValue: function (el) {
                        return $(el[0]).val();
                    },
                    isInputValid: function (el, that) {
                        return $(el[0]).val().length !== 0;
                    },
                    search: function (value, comparison) {
                        return value % comparison === 0;
                    }
                }
            }
        }
    }
})

就是這樣，一個非常簡單的外掛程式就完成了！您可以在這個範例中看到它的實際運作方式

自訂欄類型

也可以為您在表格上啟用的任何自訂 column.type 新增條件。假設您有一個名為 multipleNum 的欄類型，您想要將上述條件新增到該類型中，您可以初始化如下：

$('#myTable').DataTable( {
    dom: 'Qlfrtip',
    searchBuilder:{
        conditions:{
            multipleNum:{
                multipleOf: {
                    conditionName: 'Multiple Of',
                    init: function (that, fn, preDefined = null) {
                        var el =  $('<input/>').on('input', function() { fn(that, this) });

                        if (preDefined !== null) {
                            $(el).val(preDefined[0]);
                        }

                        return el;
                    },
                    inputValue: function (el) {
                        return $(el[0]).val();
                    },
                    isInputValid: function (el, that) {
                        return $(el[0]).val().length !== 0;
                    },
                    search: function (value, comparison) {
                        return value%comparison === 0;
                    }
                }
            }
        }
    }
    })

靜態定義

在初始化期間定義外掛程式對於單個表格很有用，但如果您想在多個表格上使用它，則會限制核心重用選項。為此，您可以擴展或修改 SearchBuilder 的 conditions 物件

$.fn.dataTable.ext.searchBuilder.conditions.num.multipleOf = {
    conditionName: 'Multiple Of',
    init: function (that, fn, preDefined = null) {
        var el =  $('<input/>').on('input', function() { fn(that, this) });

        if (preDefined !== null) {
            $(el).val(preDefined[0]);
        }

        return el;
    },
    inputValue: function (el) {
        return $(el[0]).val();
    },
    isInputValid: function (el, that) {
        return $(el[0]).val().length !== 0;
    },
    search: function (value, comparison) {
        return value%comparison === 0;
    }
};

$('#myTable').DataTable({
    dom: 'Qfrtip'
});

請注意，物件中的所有屬性都與上述完全相同。

如果您建立一個使用此方法的外掛程式條件，並且想與 DataTables 社群分享，我們很樂意收到您的來信！