Плагин jQuery DataTable ColumnFilter. Может ли стиль фильтра «выбрать» поддерживать точное совпадение?

Question

У создаваемой мной таблицы данных есть столбец "Секс". Вот фильтр ..

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

Проблема в том, что слово "мужской" находится в слове "женский", поэтому, когда я выбираю фильтр "Мужской", он показывает все Есть ли способ получить это точное совпадение или хотя бы с учетом регистра?

Answer 1

Плагин Columnfilter использует функцию API datatables fnFilter для выполнения отдельных поисков.Согласно авторской документации (немногое), он, кажется, забыл чувствительный к регистру параметр в fnFilter функции (поиск fnFilter), и плагин не дает много свободы для фильтранастройки.

Есть несколько альтернатив.

Вы можете создать свой собственный плагин фильтрации, используя функцию fnFilter, теперь, когда вы знаете, что он есть.

Вы можете сделать несколько специальных решений, , как в этомпример .Обратите внимание, что это очень ленивый пример, но он показывает, как плагин в основном работает.

Если вы готовы, вы можете изменить фильтрацию в коде плагина.Это то, что я рекомендую, потому что это легко исправить.Добавление / изменение этих строк в datatables.columnFilter.js должно быть достаточно

//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();
    });
}

Этих .fnFilter должно быть достаточно, чтобы получить то, что вы хотите.Там есть еще много всего, поэтому, если вы хотите добавить его и к другим, просто сделайте то же самое.

Все, что я сделал, это добавил параметр по умолчанию bCaseSensitive, который вы теперь можете ввести вопций, а затем добавили тот же параметр к функциям, которые создали события, и, конечно, добавили его к самой функции .fnFilter.

Удачи!

Если выне могу заставить его работать, я посмотрю, смогу ли я загрузить измененный плагин куда-нибудь, чтобы вы могли с него скачать.