Как использовать JQUERY для динамической фильтрации строк таблицы с использованием нескольких входов формы

Question

Я отображаю таблицу с несколькими строками и столбцами.Я использую плагин JQUERY с именем uiTableFilter , который использует ввод текстового поля и фильтрует (показывает / скрывает) строки таблицы на основе введенного вами ввода.Все, что вам нужно сделать, это указать столбец, по которому вы хотите фильтровать, и он будет отображать только те строки, в которые введено текстовое поле.Просто и отлично работает.

Я хочу добавить ВТОРОЕ поле ввода текста, которое поможет мне сузить результаты еще больше.Так, например, если бы у меня была таблица PETS, и один столбец был petType, а другой - petColor - я мог бы ввести CAT в первое текстовое поле, чтобы показать ВСЕ кошки, а затем во 2-м текстовом поле я мог бы напечатать черный,и результирующая таблица будет отображать только строки, в которых были найдены ЧЕРНЫЕ КОШКИ.По сути, это подмножество.

Вот JQUERY, который я использую:

   $("#typeFilter").live('keyup', function() {

    if ($(this).val().length > 2 || $(this).val().length == 0)
  {
                var newTable = $('#pets');
  $.uiTableFilter( theTable, this.value, "petType" );
  } 

   }) // end typefilter

   $("#colorFilter").live('keyup', function() {
    if ($(this).val().length > 2 || $(this).val().length == 0)
  {
  var newTable = $('#pets');
  $.uiTableFilter( newTable, this.value, "petColor" );

  } 

   }) // end colorfilter

Проблема в том, что я могу использовать один фильтр, и он будет отображать правильное подмножество строк таблицы, нокогда я предоставляю данные для другого фильтра, он, кажется, не распознает видимые строки таблицы, оставшиеся от предыдущего столбца, но вместо этого кажется, что он выполняет совершенно новую фильтрацию исходной таблицы.Если после применения одного фильтра возвращается 10 строк, второй фильтр должен применяться только к ТЕ 10 строкам.Я пробовал LIVE и BIND, но не работает.

Может кто-нибудь пролить свет на то, где я ошибаюсь?Спасибо!

Answer 1

Плагин uiTableFilter не поддерживает то, что вы пытаетесь сделать.Беглый взгляд на источник показывает это:

elems.each(function(){
    var elem = jQuery(this);
    jQuery.uiTableFilter.has_words(getText(elem), words, false)
        ? matches(elem)
        : noMatch(elem);
});

и это расширяется до (по существу) этого:

elems.each(function(){
    var elem = jQuery(this);
    jQuery.uiTableFilter.has_words(getText(elem), words, false)
        ? elem.show()
        : elem.hide();
});

Таким образом, все, что он делает, это вращается по всем строкам, .show()те, которые соответствуют, и .hide() те, которые не соответствуют;uiTableSorter не обращает внимания на текущее отображаемое / скрытое состояние строк, и нет способа заставить его фильтровать по нескольким столбцам.

Если вам действительно нужна требуемая функциональность, вы можете изменить поведение плагина (код довольно маленький и простой) или просто написать свой.Вот урезанная и упрощенная версия, которая поддерживает несколько фильтров и является более обычным плагином jQuery, чем uiTableFilter:

(function($) {
    $.fn.multiFilter = function(filters) {
        var $table = $(this);
        return $table.find('tbody > tr').each(function() {
            var tr = $(this);

            // Make it an array to avoid special cases later.
            if(!$.isArray(filters))
                filters = [ filters ];

            howMany = 0;
            for(i = 0, f = filters[0]; i < filters.length; f = filters[++i]) {
                var index = 0;
                $table.find('thead > tr > th').each(function(i) {
                    if($(this).text() == f.column) {
                        index = i;
                        return false;
                    }
                });
                var text = tr.find('td:eq(' + index + ')').text();
                if(text.toLowerCase().indexOf(f.word.toLowerCase()) != -1)
                    ++howMany;
            }
            if(howMany == filters.length)
                tr.show();
            else
                tr.hide();
        });
    };
})(jQuery);

Я оставлю обработку ошибок и производительность в качестве упражнения для читателя, это просто иллюстративныйпример, и я не хотел бы мешать вашему обучению.Вы можете подключить что-то вроде этого:

$('#type').keyup(function() {
    $('#leeLooDallas').multiFilter({ column: 'petType', word: this.value });
});
$('#color').keyup(function() {
    $('#leeLooDallas').multiFilter([
        { column: 'petType',  word: $('#type').val() },
        { column: 'petColor', word: this.value       }
    ]);
});

И вот живой пример (который предполагает, что вы собираетесь ввести что-то в «type» перед «color»): http://jsfiddle.net/ambiguous/hdFDt/1/