jQuery DataTable ColumnFilter插件。 “选择”过滤器风格支持完全匹配？ [英] jQuery DataTable ColumnFilter plugin. Can the "select" filter style support exact match?

问题描述

我正在创建的数据表有一个性别列。这里是过滤器..

  columnFilter（{
 aoColumns：[{type：select，values： ''''''
 {type：text}，
 {type：number}，
 {type：number}] 
 }）; 
  

问题是男在单词女中，所以当我选择男过滤器显示全部。有没有办法选择精确匹配，甚至至少区分大小写？

解决方案

Columnfilter插件使用数据表API函数 fnFilter 进行个人搜索。根据作者的文档（有一点），他似乎忘记了 fnFilter中的区分大小写参数功能（搜索fnFilter），插件对滤镜设置没有太大的余地。

有一个几个替代品

您可以使用 fnFilter 函数设计自己的过滤插件，现在您知道它的存在。 / p>

您可以执行一些特殊解决方案，像这样示例。请注意，这是一个非常懒惰的例子，但它显示了插件基本上如何工作。

如果你愿意，你可以改变插件代码中的过滤。这是我推荐的，因为这是一个简单的修复。
在 datatables.columnFilter.js 中添加/更改这些行应该足够

  //行563 
 ... 
 var defaults = {
 sPlaceHolder：foot，
 sRangeSeparator：〜，
 iFilteringDelay： 500，
 aoColumns：null，
 sRangeFormat：从{from}到{to}，
 bCaseSensitive：true // add this 
}; 
 
 properties = $ .extend（defaults，options）; 
  

  //行357 
 ... 
函数fnCreateSelect（oTable，aData，bRegex，bCaseSensitive）{//添加参数
 var oSettings = oTable.fnSettings（）; 
 if（aData == null&& oSettings.sAjaxSource！=&&s ooSettings.oFeatures.bServerSide）{
 oSettings.aoDrawCallback.push（{
fn ：（function（iColumn，nTh，sLabel）{
 return function（）{
 if（oSettings.iDraw == 2& amp; oSettings.sAjaxSource！= null& amp; oSettings.sAjaxSource ！=&！oSettings.oFeatures.bServerSide）{
 //添加参数
 return fnCreateColumnSelect（oTable，null，_fnColumnIndex（iColumn），nTh，sLabel，bRegex，true，true， ！bCaseSensitive）; 
} 
}; 
}）（i，th，label），
sName：column_filter_+ i 
}）; 
} 
 //添加参数
 fnCreateColumnSelect（oTable，aData，_fnColumnIndex（i），th，label，bRegex，true，true，！bCaseSensitive）; 
} 
  

  //行311 
 ... 
函数fnCreateColumnSelect（oTable，aData，iColumn，nTh，sLabel，bRegex，bCaseSensitive）{//添加此
 
 // ... 
 
 select.change（function（）{
 
 // ... 
 
 if（bRegex）
 //添加参数
 oTable.fnFilter（$（this）.val（），iColumn，bRegex，true，true，！bCaseSensitive）; 
 else 
 //添加参数
 oTable.fnFilter（unescape （$（this）.val（）），iColumn，false，true，true，！bCaseSensitive）; 
 fnOnFiltered（）; 
}）; 
} 
  

那些 .fnFilter s应该足以得到你想要的。那里还有更多的东西，所以如果你想把它添加到其他人也可以做同样的事情。

我所做的是添加一个默认的参数叫做您现在可以输入选项，然后将相同的参数添加到创建事件的函数中，然后将其添加到中，然后将其添加到 bCaseSensitive 。 fnFilter 功能本身。

最好的运气！

如果你不能让它上班，我会看看我是否可以将更改的插件上传到某个地方，供你下载。

The datatable I'm creating has a "Sex" column. Here is the filter..

columnFilter({
    aoColumns: [ { type: "select", values: [ 'Male', 'Female' ]  },
                 { type: "text" },  
                 { type: "number" },    
                 { type: "number" }]
});

The problem is that the word "male" is in the word "Female" so when I select the "Male" filter it shows all. Is there a way to have this select exact match or even at least case sensitive?

解决方案

The Columnfilter plugin uses the datatables API function fnFilter to do its individual searches. According to the author's documentation (the little there is) he seem to have forgotten the case sensitive parameter in the fnFilter function(search for fnFilter), and the plugin doesn't give much leeway for the filter settings.

There are a few alternatives.

You could design your own filtering plugin, utilizing the fnFilter function, now that you know that it's there.

You can do some ad-hoc solutions, like in this example. Note that this is a very lazy example, but it shows how the plugin basically works.

If you're up for it, you can alter the filtering in the plugin code. This is what I recommend, because it's an easy fix. Adding/changing these lines in datatables.columnFilter.js should be enough

//Line 563
...
var defaults = {
    sPlaceHolder: "foot",
    sRangeSeparator: "~",
    iFilteringDelay: 500,
    aoColumns: null,
    sRangeFormat: "From {from} to {to}",
    bCaseSensitive: true //add this
};

properties = $.extend(defaults, options);

//Line 357
...
function fnCreateSelect(oTable, aData, bRegex, bCaseSensitive) { //add parameter
    var oSettings = oTable.fnSettings();
    if (aData == null && oSettings.sAjaxSource != "" && !oSettings.oFeatures.bServerSide) {
        oSettings.aoDrawCallback.push({
            "fn": (function (iColumn, nTh, sLabel) {
                return function () {
                    if (oSettings.iDraw == 2 && oSettings.sAjaxSource != null && oSettings.sAjaxSource != "" && !oSettings.oFeatures.bServerSide) {
                        //add parameter
                        return fnCreateColumnSelect(oTable, null, _fnColumnIndex(iColumn), nTh, sLabel, bRegex, true, true, !bCaseSensitive);
                    }
                };
            })(i, th, label),
            "sName": "column_filter_" + i
        });
    }
    //add parameter
    fnCreateColumnSelect(oTable, aData, _fnColumnIndex(i), th, label, bRegex, true, true, !bCaseSensitive);
}

//Line 311
...
function fnCreateColumnSelect(oTable, aData, iColumn, nTh, sLabel, bRegex, bCaseSensitive) { //add this

    //...

    select.change(function () {

        //...

        if (bRegex)
            //add parameter
            oTable.fnFilter($(this).val(), iColumn, bRegex, true, true, !bCaseSensitive);
        else
            //add parameter
            oTable.fnFilter(unescape($(this).val()), iColumn, false, true, true, !bCaseSensitive);
        fnOnFiltered();
    });
}

Those .fnFilters should be enough to get what you want. There are plenty more in there, so if you want to add it on the others as well, just do the same thing.

All I did was add a default parameter called bCaseSensitive that you can now enter in the options and then added the same parameter to the functions that created the events and of course, added it to the .fnFilter function itself.

Best of luck!

If you can't get it to work, I'll see if I can upload the altered plugin somewhere for you to download from.

这篇关于jQuery DataTable ColumnFilter插件。 “选择”过滤器风格支持完全匹配？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！