jQuery DataTable ColumnFilter plugin. Can the “select” filter style support exact match?

问题

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?

回答1:

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.

来源：https://stackoverflow.com/questions/9520423/jquery-datatable-columnfilter-plugin-can-the-select-filter-style-support-exac

标签

jquery

datatables