Форум

Anushki · #1 (**permalink**) 04.02.2018, 18:53

Всем привет. Подскажите как настроить фильтрацию чтобы они были привязаны к определенным tr и td. И были связанны между собой.

Например: Москва, гражданское право - должно отображать все компании по москве которые ведут дела по гражданскому праву.

<!DOCTYPE html>
<html>
<head>
<title>Фильтрация по Select'ам</title>
</head>

<body>
<table>
<thead>
<tr>
<th>Название организации</th>
<th>
<select id="a">
<option value="" selected disabled>- Выберите город -</option>
<option value="a1">Москва</option>
<option value="a2">Питер</option>
</select>
</th>
<th>
<select id="b">
<option value="" selected disabled>- Области права -</option>
<option value="b1">Гражданское право</option>
<option value="b2">Уголовное право</option>
</select>
</th>
</tr>
</thead>
<tbody id="target">
<tr>
<td>Компания 1</td>
<td name="a1">Москва</td>
<td name="b1">Гражданское право</td>
</tr>
<tr>
<td>Компания 2</td>
<td name="a1">Москва</td>
<td name="b2">Уголовное право</td>
</tr>
<tr>
<td>Компания 3</td>
<td name="a2">Питер</td>
<td name="b1">Гражданское право</td>
</tr>
<tr>
<td>Компания 4</td>
<td name="a2">Питер</td>
<td name="b2">Уголовное право</td>
</tr>
</tbody>
</table>

<script>

</script>
</body>
</html>

j0hnik · #2 (**permalink**) 04.02.2018, 19:49

<!DOCTYPE html>
<html>
<head>
<title>Фильтрация по Select'ам</title>
</head>

<body>
<table>
<thead>
<tr>
<th>Название организации</th>
<th>
<select id="a">
<option value="" selected disabled>- Выберите город -</option>
<option value="a1">Москва</option>
<option value="a2">Питер</option>
</select>
</th>
<th>
<select id="b">
<option value="" selected disabled>- Области права -</option>
<option value="b1">Гражданское право</option>
<option value="b2">Уголовное право</option>
</select>
</th>
</tr>
</thead>
<tbody id="target">
<tr>
<td>Компания 1</td>
<td name="a1">Москва</td>
<td name="b1">Гражданское право</td>
</tr>
<tr>
<td>Компания 2</td>
<td name="a1">Москва</td>
<td name="b2">Уголовное право</td>
</tr>
<tr>
<td>Компания 3</td>
<td name="a2">Питер</td>
<td name="b1">Гражданское право</td>
</tr>
<tr>
<td>Компания 4</td>
<td name="a2">Питер</td>
<td name="b2">Уголовное право</td>
</tr>
</tbody>
</table>
<script>

var tr = document.querySelectorAll('#target tr'),
sel = document.querySelectorAll('select');
sel.forEach(el=>el.onclick=e=>tr.forEach(el=>el.style.display = (el.textContent.includes(sel[0].options[sel[0].selectedIndex].textContent) || sel[0].selectedIndex==0) && (el.textContent.includes(sel[1].options[sel[1].selectedIndex].textContent) || sel[1].selectedIndex==0)?'table-row':'none'));

</script>
</body>
</html>

рони · #3 (**permalink**) 04.02.2018, 19:54

Anushki,

другие варианты по ссылкам (добавлен параметр исключения колонок из фильтрации )
https://javascript.ru/forum/showthread.php?p=306236
https://javascript.ru/forum/misc/522...tml#post345974

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body{height:1000px;background:#FF8C00;font-family:Georgia,"Times New Roman",Times,serif;letter-spacing:1px}
  .zebra select{margin:0px auto;width:100%;background:#CCC;color:#FFF}
  .zebra select option {color: #ff0;background: #000;}
  .zebra select option:nth-of-type(1) {color: #FFFFFF;background: #000;}
  .zebra td{border:1px solid #555555;color:#FFF;padding:5px;text-align:left;background:#000}
  .zebra tr:nth-child(2n) td{background:#383838}
  .zebra thead td:hover{background-image:-webkit-gradient(linear,top,bottom,color-stop(0,#E6E6FA),color-stop(1,#696969));background-image:-ms-linear-gradient(top,#E6E6FA,#696969);background-image:-o-linear-gradient(top,#E6E6FA,#696969);background-image:-moz-linear-gradient(top,#E6E6FA,#696969);background:-webkit-linear-gradient(top,#E6E6FA,#696969);background:linear-gradient(to bottom,#E6E6FA,#696969)}
  .zebra thead tr td{padding:5px;font-weight:bold;background-image:-webkit-gradient(linear,top,bottom,color-stop(0,#000000),color-stop(1,#CCCCCC));background-image:-o-linear-gradient(top,#000000,#CCCCCC);background-image:-moz-linear-gradient(top,#000000,#CCCCCC);background-image:-webkit-linear-gradient(top,#000000,#CCCCCC);background:linear-gradient(to bottom,#000000,#CCCCCC)}
  .zebra tbody tr:hover td{background-image:-webkit-gradient(linear,left,right,color-stop(0,#D2691E),color-stop(1,#DEB887));background-image:-ms-linear-gradient(left,#D2691E,#DEB887);background-image:-o-linear-gradient(left,#D2691E,#DEB887);background-image:-moz-linear-gradient(left,#D2691E,#DEB887);background:-webkit-linear-gradient(left,#D2691E,#DEB887);background:linear-gradient(to right,#D2691E,#DEB887)}
  table.zebra{border-collapse:collapse;border-spacing:0;box-shadow:0 2px 1px 5px rgba(242,242,242,0.1);width:700px;margin:0px auto}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script>
$(function () {
    $("table").tablework();
});
$.fn.tablework = function() {
    return this.each(function() {
        var $table = $(this),
            $trs = $table.find("tbody tr"),
            $thead = $table.find('thead');
        $thead.length || ($thead = $('<thead/>').prependTo($table));
        var $tr = $('<tr/>').prependTo($thead),
            hide = {};
        $("td", $trs.first()).each(function(indx, element) {
            var options = [$('<option/>', {
                    'text': 'Без выбора'
                })],
                $td = $trs.find(":nth-child(" + (indx + 1) + ")"),
                temp = {};
            $td.each(function(i, el) {
                var text = $(el).text();
                temp[text] || (
                    options.push($('<option/>', {
                        'text': text
                    })),
                    temp[text] = true
                );
            });
            var $select = $('<select/>', {
                multiple: "multiple",
                html: options,
                'change': function() {
                    var val = $(this).val() || [];
                    hide[indx] = [];
                    this.selectedIndex && $td.each(function(i, el) {
                        $.inArray($(el).text(), val) == -1 && hide[indx].push($trs[i])
                    });
                    var trs = [];
                    for (var k in hide) $.merge(trs, hide[k]);
                    $.unique(trs);
                    $trs.show();
                    $(trs).hide()

                }

            });
            $('<td/>').append($select).appendTo($tr);
        });

    });
};
</script>
</head>
<body>
<br>
<table class="zebra" >
<tbody id="target">
<tr>
<td>Компания 1</td>
<td name="a1">Москва</td>
<td name="b1">Гражданское право</td>
</tr>
<tr>
<td>Компания 2</td>
<td name="a1">Москва</td>
<td name="b2">Уголовное право</td>
</tr>
<tr>
<td>Компания 3</td>
<td name="a2">Питер</td>
<td name="b1">Гражданское право</td>
</tr>
<tr>
<td>Компания 4</td>
<td name="a2">Питер</td>
<td name="b2">Уголовное право</td>
</tr>
</tbody>
	</table>

</body>
</html>

j0hnik · #4 (**permalink**) 04.02.2018, 20:08

рони,
Куя се ты заморочился

Anushki · #5 (**permalink**) 04.02.2018, 20:18

Первый вариант проще.. к тому же если использовать второй вариант то нет возможности выводить дополнительные столбцы вне фильтрации.. например название компании

Anushki · #6 (**permalink**) 04.02.2018, 20:19

спасибо вам обоим ребят) вы оба мои кумиры)

рони · #7 (**permalink**) 04.02.2018, 20:31

Сообщение от Anushki

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

о чём это вы?

laimas · #8 (**permalink**) 05.02.2018, 06:29

Сообщение от рони

другие варианты

А можно и не тасовать ячейки таблицы. При первом запросе к сортировке получить значения ячеек в объект, ключами которого являются индексы колонок, а значениями объекты - значения колонки под индексами строк как ключами. Далее сортируем объект выбранной колонки и заменяем значения ячеек таблицы значениями из этого объекта по ключам отсортированного объекта.

рони · #9 (**permalink**) 05.02.2018, 11:07

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

laimas · #10 (**permalink**) 05.02.2018, 11:19

Сообщение от рони

не понял

Таблица с колонками A, B, C по которым производится сортировка.

A B C
1 4 7
2 5 8
3 6 9

При запросах, если объект еще не создан, то создается:

obj = {
    'A': {'0': 1, '1': 2, '2': 3},
    'B': {'0': 4, '1': 5, '2': 6},
    'C': {'0': 7, '1': 8, '2': 9}
}

Если выбрана сортировка по колонке B, то сортируется копия объекта В, а таблица заполняется данными взятыми из объекта по ключам отсортированной копии. Например после сортировки получится так - {'2': 6, '0': 4, '1': 5}, значит таблица будет заполнена:

1 строка - значения объектов под ключами 2
2 строка - значения объектов под ключами 0
3 строка - значения объектов под ключами 1

Форум

Справочник

Discord чат

Курсы javascript