Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Фильтр таблицы по классу (https://javascript.ru/forum/jquery/76011-filtr-tablicy-po-klassu.html)

Anonket 25.11.2018 00:28
Фильтр таблицы по классу
 
Возможно ли создать фильтр, чтобы искал несколько значений в классе.

Например: class="f-Кольцо f-Кольцо f-Пояс".

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

Селекторами я выбираю "Кольцо Кольцо Пояс" или "Кольцо Пояс Кольцо" и ищет эти значения в классе, а класс один и тот же "class="f-Кольцо f-Кольцо f-Пояс"".

Классы могут совпадать.

<tr "class="f-Кольцо f-Кольцо f-Пояс">
     <td>Кольцо</td>
     <td>Кольцо</td>
     <td>Пояс</td>
</tr>
     <tr class="f-Кольцо f-Пояс f-Кольцо">
     <td>Кольцо</td>
     <td>Пояс</td>
     <td>Кольцо</td>
</tr>



<div class="table-filters">
        Ячейка предметов 1 <select id="itemslot1-filter">
        <option>Все</option> 
        <option value="Икона">Икона</option>
        <option value="Кольцо">Кольцо</option>
        <option value="Пояс">Пояс</option>
        <option value="Талисман">Талисман</option>
        <option value="Темляк">Темляк</option>
        <option value="Шея">Шея</option> 
    </select>
    Ячейка предметов 2 <select id="itemslot2-filter">
        <option>Все</option> 
        <option value="Икона">Икона</option>
        <option value="Кольцо">Кольцо</option>
        <option value="Пояс">Пояс</option>
        <option value="Талисман">Талисман</option>
        <option value="Темляк">Темляк</option>
        <option value="Шея">Шея</option> 
    </select>
    Ячейка предметов 3 <select id="itemslot3-filter">
        <option>Все</option> 
        <option value="Икона">Икона</option>
        <option value="Кольцо">Кольцо</option>
        <option value="Пояс">Пояс</option>
        <option value="Талисман">Талисман</option>
        <option value="Темляк">Темляк</option>
        <option value="Шея">Шея</option> 
    </select>
</div>
    
<table id="filter-table">
    <thead>
        <tr>
            <th>Ячейка предметов 1</th>
            <th>Ячейка предметов 2</th>
            <th>Ячейка предметов 3</th>
        </tr>
    </thead>
    <tbody>
        <tr data-filter="Кольцо,Шея,Пояс">
            <td>Кольцо</td>
            <td>Шея</td>
            <td>Пояс</td>
        </tr>
        <tr data-filter="Шея,Пояс,Кольцо">
            <td>Шея</td>
            <td>Пояс</td>
            <td>Кольцо</td>
        </tr>
        <tr data-filter="Темляк,Шея,Кольцо">
            <td>Темляк</td>
            <td>Шея</td>
            <td>Кольцо</td>
        </tr>
        <tr data-filter="Кольцо,Кольцо,Кольцо">
            <td>Кольцо</td>
            <td>Кольцо</td>
            <td>Кольцо</td>
        </tr>
        <tr data-filter="Кольцо,Кольцо,Талисман">
            <td>Кольцо</td>
            <td>Кольцо</td>
            <td>Талисман</td>
        </tr>
    </tbody>
</table>

рони 25.11.2018 01:01
Anonket,
так можно сделать?
<tr data-filter="Кольцо,Шея,Пояс">
            <td>Кольцо</td>
            <td>Шея</td>
            <td>Пояс</td>
        </tr>

Anonket 25.11.2018 09:49
Цитата:
Сообщение от рони (Сообщение 499309)
Anonket,
так можно сделать?
<tr data-filter="Кольцо,Шея,Пояс">
            <td>Кольцо</td>
            <td>Шея</td>
            <td>Пояс</td>
        </tr>
Да.

рони 25.11.2018 10:06
Anonket,
отредактируйте строки в первом сообщении, добавьте data-filter

Anonket 25.11.2018 10:22
Добавил

рони 25.11.2018 11:03
фильтрация строк таблицы
 
Anonket,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    var pattern = [],
        trs = $("#filter-table tbody tr");
    $(".table-filters select").each(function(i, select) {
        var el = $(select);
        pattern.push(select.value);
        el.change(function() {
            pattern[i] = select.value;
            trs.hide().filter(function(i, tr) {
                var data = $(tr).data("filter").split(",");
                return pattern.every(function(txt, k) {
                    return txt == "Все" || txt == data[k]
                })
            }).show()
        })
    })
});
  </script>
</head>

<body>
<div class="table-filters">
        Ячейка предметов 1 <select id="itemslot1-filter">
        <option>Все</option>
        <option value="Икона">Икона</option>
        <option value="Кольцо">Кольцо</option>
        <option value="Пояс">Пояс</option>
        <option value="Талисман">Талисман</option>
        <option value="Темляк">Темляк</option>
        <option value="Шея">Шея</option>
    </select>
    Ячейка предметов 2 <select id="itemslot2-filter">
        <option>Все</option>
        <option value="Икона">Икона</option>
        <option value="Кольцо">Кольцо</option>
        <option value="Пояс">Пояс</option>
        <option value="Талисман">Талисман</option>
        <option value="Темляк">Темляк</option>
        <option value="Шея">Шея</option>
    </select>
    Ячейка предметов 3 <select id="itemslot3-filter">
        <option>Все</option>
        <option value="Икона">Икона</option>
        <option value="Кольцо">Кольцо</option>
        <option value="Пояс">Пояс</option>
        <option value="Талисман">Талисман</option>
        <option value="Темляк">Темляк</option>
        <option value="Шея">Шея</option>
    </select>
</div>

<table id="filter-table">
    <thead>
        <tr>
            <th>Ячейка предметов 1</th>
            <th>Ячейка предметов 2</th>
            <th>Ячейка предметов 3</th>
        </tr>
    </thead>
    <tbody>
        <tr data-filter="Кольцо,Шея,Пояс">
            <td>Кольцо</td>
            <td>Шея</td>
            <td>Пояс</td>
        </tr>
        <tr data-filter="Шея,Пояс,Кольцо">
            <td>Шея</td>
            <td>Пояс</td>
            <td>Кольцо</td>
        </tr>
        <tr data-filter="Темляк,Шея,Кольцо">
            <td>Темляк</td>
            <td>Шея</td>
            <td>Кольцо</td>
        </tr>
        <tr data-filter="Кольцо,Кольцо,Кольцо">
            <td>Кольцо</td>
            <td>Кольцо</td>
            <td>Кольцо</td>
        </tr>
        <tr data-filter="Кольцо,Кольцо,Талисман">
            <td>Кольцо</td>
            <td>Кольцо</td>
            <td>Талисман</td>
        </tr>
    </tbody>
</table>


</body>
</html>

Anonket 25.11.2018 11:37
рони,
Спасибо, а так не выйдет? Если в дата значения такие "Кольцо,Кольцо,Талисман", а селекторами выбираю "Талисман, Кольцо,Кольцо" и найти эти значения в дата. В селекторе "Талисман" первый, а в дата он третий.

рони 25.11.2018 11:49
Anonket,
выйдет.

рони 25.11.2018 12:11
Anonket,
проверьте!
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    var pattern = [],
        trs = $("#filter-table tbody tr");
    $(".table-filters select").each(function(i, select) {
        var el = $(select);
        pattern.push(select.value);
        el.change(function() {
            pattern[i] = select.value;
            trs.hide().filter(function(i, tr) {
                var data = $(tr).data("filter").split(",");
                var arr = pattern.slice(0);
                data.forEach(function(a) {
                var i = arr.indexOf(a);
                if(i != -1) arr.splice(i,1);
                })
                return arr.every(function(txt, k) {
                    return txt == "Все"
                })

            }).show()
        })
    })
});
  </script>
</head>

<body>
<div class="table-filters">
        Ячейка предметов 1 <select id="itemslot1-filter">
        <option>Все</option>
        <option value="Икона">Икона</option>
        <option value="Кольцо">Кольцо</option>
        <option value="Пояс">Пояс</option>
        <option value="Талисман">Талисман</option>
        <option value="Темляк">Темляк</option>
        <option value="Шея">Шея</option>
    </select>
    Ячейка предметов 2 <select id="itemslot2-filter">
        <option>Все</option>
        <option value="Икона">Икона</option>
        <option value="Кольцо">Кольцо</option>
        <option value="Пояс">Пояс</option>
        <option value="Талисман">Талисман</option>
        <option value="Темляк">Темляк</option>
        <option value="Шея">Шея</option>
    </select>
    Ячейка предметов 3 <select id="itemslot3-filter">
        <option>Все</option>
        <option value="Икона">Икона</option>
        <option value="Кольцо">Кольцо</option>
        <option value="Пояс">Пояс</option>
        <option value="Талисман">Талисман</option>
        <option value="Темляк">Темляк</option>
        <option value="Шея">Шея</option>
    </select>
</div>

<table id="filter-table">
    <thead>
        <tr>
            <th>Ячейка предметов 1</th>
            <th>Ячейка предметов 2</th>
            <th>Ячейка предметов 3</th>
        </tr>
    </thead>
    <tbody>
        <tr data-filter="Кольцо,Шея,Пояс">
            <td>Кольцо</td>
            <td>Шея</td>
            <td>Пояс</td>
        </tr>
        <tr data-filter="Шея,Пояс,Кольцо">
            <td>Шея</td>
            <td>Пояс</td>
            <td>Кольцо</td>
        </tr>
        <tr data-filter="Темляк,Шея,Кольцо">
            <td>Темляк</td>
            <td>Шея</td>
            <td>Кольцо</td>
        </tr>
        <tr data-filter="Кольцо,Кольцо,Кольцо">
            <td>Кольцо</td>
            <td>Кольцо</td>
            <td>Кольцо</td>
        </tr>
        <tr data-filter="Кольцо,Кольцо,Талисман">
            <td>Кольцо</td>
            <td>Кольцо</td>
            <td>Талисман</td>
        </tr>
    </tbody>
</table>


</body>
</html>

Anonket 25.11.2018 12:17
рони,
Отлично! Это то, что нужно было. Спасибо!

Anonket 28.11.2018 21:44
рони,
Привет, а можно еще сделать такой код через совпадения select и data. Если совпадений нету, добавить строку "Не найдено.".

var $table = $('.wikitable'),
    $colLength = $table.find('thead th').length,
    $filteredRows = $table.find("tbody tr:visible"),
    $filteredCount = $filteredRows.length;

    $(".no-results").remove();
    if ($filteredCount == 0) {
      $table.find('tbody').append($("<tr />").addClass("no-results").css({
        "text-align": "center"
      }).append($("<td />").attr("colspan", $colLength).html("Не найдено.")));
    }

И еще вопрос. На сайте в хроме скрипт не работает (иногда срабатывает), а в Firefox работает.
Uncaught TypeError: Cannot read property 'split' of undefined

Таблица и селекторы указаны.
$(function () {
  var pattern = [],
      $trs = $(".wikitable tbody tr");
  $("#table-filters select").each(function (i, select) {

рони 28.11.2018 23:19
Цитата:
Сообщение от Anonket
Если совпадений нету, добавить строку "Не найдено.".
 
<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    tbody tr:last-child{
        text-align: center;
        background-color: #FFFACD;
        display: none;
    }
    tbody.no-results tr:last-child{
        display: table-row;
    }

    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script>
$(function() {
        var pattern = [],
        tbody = $("#filter-table tbody"),
        trs = $("[data-filter]", tbody);
        $(".table-filters select").each(function(i, select) {
                var el = $(select);
                pattern.push(select.value);
                el.change(function() {
                        pattern[i] = select.value;
                 var rows = trs.hide().filter(function(i, tr) {
                                var data = $(tr).data("filter").split(",");
                                var arr = pattern.slice(0);
                                data.forEach(function(a) {
                                var i = arr.indexOf(a);
                                if(i != -1) arr.splice(i,1);
                                })
                                return arr.every(function(txt, k) {
                                        return txt == "Все"
                                })

                        }).show();
                 tbody.toggleClass("no-results", !rows.length )
           })
        })
});
    </script>
</head>

<body>
<div class="table-filters">
                Ячейка предметов 1 <select id="itemslot1-filter">
                <option>Все</option>
                <option value="Икона">Икона</option>
                <option value="Кольцо">Кольцо</option>
                <option value="Пояс">Пояс</option>
                <option value="Талисман">Талисман</option>
                <option value="Темляк">Темляк</option>
                <option value="Шея">Шея</option>
        </select>
        Ячейка предметов 2 <select id="itemslot2-filter">
                <option>Все</option>
                <option value="Икона">Икона</option>
                <option value="Кольцо">Кольцо</option>
                <option value="Пояс">Пояс</option>
                <option value="Талисман">Талисман</option>
                <option value="Темляк">Темляк</option>
                <option value="Шея">Шея</option>
        </select>
        Ячейка предметов 3 <select id="itemslot3-filter">
                <option>Все</option>
                <option value="Икона">Икона</option>
                <option value="Кольцо">Кольцо</option>
                <option value="Пояс">Пояс</option>
                <option value="Талисман">Талисман</option>
                <option value="Темляк">Темляк</option>
                <option value="Шея">Шея</option>
        </select>
</div>

<table id="filter-table">
        <thead>
                <tr>
                        <th>Ячейка предметов 1</th>
                        <th>Ячейка предметов 2</th>
                        <th>Ячейка предметов 3</th>
                </tr>
        </thead>
        <tbody>
                <tr data-filter="Кольцо,Шея,Пояс">
                        <td>Кольцо</td>
                        <td>Шея</td>
                        <td>Пояс</td>
                </tr>
                <tr data-filter="Шея,Пояс,Кольцо">
                        <td>Шея</td>
                        <td>Пояс</td>
                        <td>Кольцо</td>
                </tr>
                <tr data-filter="Темляк,Шея,Кольцо">
                        <td>Темляк</td>
                        <td>Шея</td>
                        <td>Кольцо</td>
                </tr>
                <tr data-filter="Кольцо,Кольцо,Кольцо">
                        <td>Кольцо</td>
                        <td>Кольцо</td>
                        <td>Кольцо</td>
                </tr>
                <tr data-filter="Кольцо,Кольцо,Талисман">
                        <td>Кольцо</td>
                        <td>Кольцо</td>
                        <td>Талисман</td>
                </tr>
                <tr>
                        <td colspan="3">Не найдено.</td>
                </tr>
        </tbody>
</table>


</body>
</html>

Anonket 29.11.2018 00:11
рони,
Спасибо.:thanks:


Часовой пояс GMT +3, время: 00:09.