SearchBuilder 插件

SearchBuilder 在其提供的默认过滤方法中已非常有用，但是如果你想要添加你自己的条件或更改已经存在的条件，该怎么办？这可以通过创建一个插件来完成。

必需的参数

当你为 SearchBuilder 创建一个插件时，将一个对象添加到 searchBuilder.conditions 对象中，基于当应该应用插件的数据类型（columns.type）。你所有的自定义插件对象中都必须定义以下属性

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: {
                    ...
                }
            }
        }
    }
})

我们希望我们的条件在下拉列表中显示为 Multiple Of，因此我们将 searchBuilder.conditions[type].conditionName 属性设置为 'Multiple Of'，如下所示（此处仅显示插件对象以简洁明了）

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 社区分享，那么我们非常愿意听取你的意见！