Фильтрация данных на странице со стороны клиента?

Question

[Юрий Пихтарев]

Доброго времени суток.



Возникла необходимость создать html-таблицу на стороне клиента, используя данные, отфильтрованные согласно некоторому условию. То есть условно при загрузке страницы выводится таблица, в которой все(почти все) строки имеют значение hidden. При нажатии на кнопку, атрибут скрытия снимается у строк, которые удовлетворяют условию, заданному нажатой кнопкой. Все это происходит без перезагрузки страницы. Каждый раз тягать все данные аяксом целиком не вариант, говорю сразу. Надо именно фильтровать на стороне клиента.



Никто не встречал что-нибудь похожее на то, что я описал, ну или хотя бы способом решения не поделится? Видел похожий плагин jquery, но сейчас найти не могу (не tablesorter).

Answer 1

[Юрий Пихтарев]

Спасибо за идею. Но сейчас вот совершенно случайно нашел нечто еще более подходящее, как мне кажется: datatables.net/release-datatables/examples/api/multi_filter_select.html — поэтому, в принципе, более ничего не требуется.

Answer 2

[DWSVad]

Зависит от задачи, у меня было нечто похожее, но в моем случае фильтр был только один(не помню точно, что-то вроде «добавлено в базу», " уже есть в базе", не добавлено по причине N"? где N — описание причины) так в этом случае было добавить тегу tr добавить класс некоторого статуса('added','exist','not_added_n') и потом на фильтр повешать обработчик, который сделает нужный класс видимым, остальные скроет)

Answer 3

[DWSVad]

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

Answer 4

[Алекс Белов]

А вот ещё идея…

HTML

<table>
  <tr class="color metall">
    <td>Красный</td><td>Железо</td>
  </tr>
  <tr class="metall">
    <td>Медь</td><td>Сталь</td>
  </tr>
  <tr class="color">
    <td>Синий</td><td>Белый</td>
  </tr>
</table>

JS

$(document).ready(function() {
  $("#filtr_color").click(function() {
    $("tr").hide();
    $(".color").show();
  });
});