фильтрация строк в таблице после отрисовки, JS

Question

Помогите пожалуйста c фильтрацией таблицы. Имеется таблица, пример со срокой ниже(остальные строки аналогичны). После отрисовки исходной таблицы, необходимо отфильтровать строки по значениям в колонке Downtime W21

<table class="table table-75" id="myTable">
    <thead>
        <tr class="header">
            <th>№</th>
            <th>Date</th>
            <th>Branch</th>
            <th class="nowrap">NRI BS</th>
            <th>Standard</th>
            <th>Total RCN</th>
            <th>Downtime W19</th>
            <th>% W19</th>
            <th>Downtime W20</th>
            <th>% W20</th>
            <th>Downtime W21</th>
            <th>% W21</th>
            <th>Reason <input type="text" placeholder="Search..."><span>X</span></th>
            <th>Comment</th>
            <th>Action</th>
            <th>Group <input type="text" placeholder="Search..."><span>X</span></th>
            <th>Responsible <input type="text" placeholder="Search..."><span>X</span></th>
            <th>Deadline</th>
        </tr>
    </thead>


    <tbody id="searchTable">
        <form name="form" id="form" class="form-inline" action="/report/sc_analysis/write" method="post"></form>
            <input type="hidden" name="user_id" value="149">
            <input type="hidden" name="period" value="2020-05-18">
            <input type="hidden" name="branch_id" value="15">

            <tr>    
                <td> 1</td>
                <td class="nowrap">2020-05-18 </td>
                <td class="nowrap">Kazan </td>
                <td> <a class="horizontal-menu" href="/report/sc_analysis/cells/all/15/2020-05-18/50481"> 50481 </a> </td>
                <td> 3 </td>
                <td> 100 </td>
                <td> 55987200 </td>
                <td> 23,09 </td>
                <td> 57888000 </td>
                <td> 5,85 </td>
                <td> 55900800 </td>
                <td> 22,16 </td>
                <td>
                    <select name="reason[Kazan_50481_3]" id="selectKazan_50481_3">
                        <option value="Нулевой" selected="">Нулевой</option>                        
                        <option value="Нулевой">Нулевой</option>
                        <option value="Оперативный">Оперативный</option>
                        <option value="Планирование">Планирование</option>
                        <option value="Правка в Глобус">Правка в Глобус</option>
                        <option value="Правка в NRI">Правка в NRI</option>
                        <option value="Правка в NIS">Правка в NIS</option>
                        <option value="Проблемная">Проблемная</option>
                        <option value="РИЧ">РИЧ</option>
                        <option value="СГОН">СГОН</option>
                        <option value="LTЕ сбой">LTЕ сбой</option>
                        <option value="Доп. анализ">Доп. анализ</option>
                    </select>
                </td>
                <td>
                    <textarea style="width: 250px;" title="Стадион" rows="1" name="comment[Kazan_50481_3]">Стадион</textarea> 
                </td>
                <td>
                    <textarea style="width: 250px;" title="RFC 555749/19 исп. Май" rows="1" name="action[Kazan_50481_3]">RFC 555749/19 исп. Май</textarea>
                </td>
                <td>
                    <input type="text" name="responsible_group[Kazan_50481_3]">
                </td>
                <td>
                    <input type="text" name="responsible[Kazan_50481_3]">
                </td>
                <td>
                    <input type="date" value="2020-05-31" name="deadline[Kazan_50481_3]">
                </td>                    
            </tr>         



    </tbody>
</table>

Буду благодарен за совет!

Answer 1

Стандартная функция javascript sort

$('#searchTable tr').sort(function(a, b) { //указываем контейнер и какие элементы сортируем
    return +$(b).find('td:nth-of-type(11)').text() - +$(a).find('td:nth-of-type(11)').text(); 
    //преобразовываем текст в числа и сравниваем в нужных элементах td 
}).appendTo('#searchTable'); // возвращаем в контейнер

В идеале дать спец класс элементам td по которым будет сортировка, чтобы "td:nth-of-type(11)" заменить на более красивое, к примеру, "td.dwntm_w21"

В ещё бОльшем идеале, в случае, если не нужна сортировка по кликам на колонки, выполнять сортировку на стороне сервера.

Ответ подсмотрел тут: Сортировка строк в таблице с помощью jQuery

БЛОГ НА HUSL

фильтрация строк в таблице после отрисовки, JS

Ответы (1 шт):