Tablesorter: внешний флажок для фильтрации

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

Желаемая функциональность. Для простоты предположим, что столбец 4 содержит либо 0, либо 1. Когда этот внешний флажок установлен, я бы хотел, чтобы он фильтровал результаты (где столбец 4 содержит значение 1).

Рабочий вариант: при использовании внешнего выбора (раскрывающегося списка) я могу добиться желаемой функциональности. Элемент select (<select id="test_select" name="test_select" class="search" data-column="4">) имеет параметр (<option value="1">1</option>), а затем в конфигурации «widgetOptions» есть filter_external: '.search'.

Но выбор с одним параметром не имеет смысла с точки зрения удобства использования.

Какие-либо предложения?


javascript checkbox jquery tablesorter
person Steve    schedule 24.06.2016    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Используйте метод "search" для выполнения любого запросы к данным таблицы.

Вот пример

HTML

<label><input id="findzeroes" type="checkbox"> Find Zeroes</label>

Скрипт

$(function() {

  $('#findzeroes').on('change', function(){
    var query = [];
    if (this.checked) {
      // target 4th column (zero-based index)
      query[3] = '0';
    }
    $('table').trigger('search', [ query ]);
  });

  $('table').tablesorter({
    theme: 'blue',
    widgets: ['zebra', 'filter']
  });
});

Использование <select> вместо флажка также будет работать.

person Mottie    schedule 24.06.2016
comment
Это идеально! Работал как шарм. Как всегда, большое спасибо. - person Steve; 25.06.2016

arrow_upward
0
arrow_downward

Я хотел включать и выключать фильтр с несколькими столбцами с помощью флажка, но обнаружил, что ответ @Mottie не помог, потому что он не позволяет фильтровать типы filter_external и data-column="7,8".

Поэтому я только что создал скрытое поле с атрибутом data-column="7,8" и использовал jQuery для изменения его значения при изменении флажка, а также для запуска события keyup.

$('#checkboxId').on('change', function(){
    var filterTerm = $(this).prop('checked') ? '?' : ''
    $('#hiddenFieldId').val(filterTerm).keyup() 
})

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

person Matt Kemp    schedule 29.06.2021