Filtering data on a page from the client side?

Question

PHP

Good day.

There was a need to create an html-table on the client side, using data filtered according to some condition. That is, conditionally, when the page is loaded, a table is displayed in which all (almost all) rows have the hidden value. When the button is clicked, the hiding attribute is removed from rows that satisfy the condition specified by the pressed button. All this happens without reloading the page. Each time pulling all the data with Ajax is not an option, I say right away. It is necessary to filter on client side.

No one has met anything similar to what I described, or at least share a solution? I saw a similar jquery plugin, but now I can't find it (not tablesorter).

Answer 1

Thanks for the idea. But now, quite by accident, I found something even more suitable, it seems to me: datatables.net/release-datatables/examples/api/multi_filter_select.html - therefore, in principle, nothing more is required.

Answer 2

Depends on the task, I had something similar, but in my case there was only one filter (I don’t remember exactly, something like “added to the database”, “already in the database”, not added due to N "? where N - description of the reason) so in this case it was to add a tr tag to add a class of some status ('added', 'exist', 'not_added_n') and then hang a handler on the filter that will make the desired class visible, hide the rest)

Answer 3

If there are a lot of filters, then probably the right decision would be to process the contents of the cells and, depending on this, hide or show, you can remember the results of those already processed once, and when you click again, immediately start displaying / hiding

Answer 4

And here's another idea...
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();
  });
});