Фильтр в таблице по select-ам
Работаю с таблицами, хочу сделать небольшой плагин чтоб не морочиться в дальнейшем, я только учусь. Что я делаю не так? Все работает кроме самого фильтрования. Если прописать для каждого select-а в столбце код функции add_filters(), то он заработает, когда через функцию для всех select - ничего не работает, не реагирует на изменения.
$(function() { var $table = $("#table_isp").tablework(); }); (function( $ ){ $.fn.tablework = function() { var $table = $(this); // Определяем сколько строк в таблице var $rows = $table.find('tbody > tr').length; // Определяем сколько столбцов в таблице var $cols = $table.find('tbody >tr:first>td').length; // Добавляем строку в начало таблицы для select $table.find('thead').prepend("<tr></tr>"); // Добавляем select-ы в шапку таблицы function add_select ($v) { for( var $i = 0; $i < $v; $i++) { $table.find('thead >tr:first').append("<td><select id='"+$i+$i+"'></select></td>"); } } // Заполняем select-ы данными function in_select ($v) { for( var $i = 0; $i < $v; $i++) { var sel_num = $i; $table.find('tbody tr').each(function(){ $(this).children('td').each(function(td_num){ if(td_num==sel_num){ var text_td = $(this).text(); $("#"+sel_num+sel_num).append("<option>"+text_td+"</option>"); } }); }); // Удаляем похожие строки $("#"+sel_num+sel_num+" option").each(function() { var text_option = $(this).text(); var options = $('option'); var alf = $(this); var i = -1; options.each(function() { if ( ($(this).text() == alf.text() )&& (++i>0) ) alf.remove() }) }); } } // Добавляем первые пустые option вselect-ы function add_optionfalse ($v) { for( var $i = 0; $i < $v; $i++) { $("#"+$i+$i).prepend("<option></option>"); } } // Добавляем фильтрацию по select-ам function add_filters ($v) { for( var $i = 0; $i < $v; $i++) { // Добавляем фильтрацию var filter = $("#"+sel_num+sel_num); filter.change(function(e) { var niddle = $(this).val(); $table.find("tbody> tr").filter(function() { if (!$(this).find("td:eq("+sel_num+")").is(':contains("' + niddle + '")')) { return true; } else { $(this).show(); return false; } }).hide(); }); } } add_select ($cols); in_select ($cols); add_optionfalse ($cols); add_filters ($cols); }; })( jQuery ); |
Hedkost,
строка 56 переменная sel_num неопределена |
ок, спасибо большое
|
Исправил, теперь при изменении в любом селекте все данные таблицы пропадают
$(function() { var $table = $("#table_isp").tablework(); }); (function( $ ){ $.fn.tablework = function() { var $table = $(this); // Определяем сколько строк в таблице var $rows = $table.find('tbody > tr').length; // Определяем сколько столбцов в таблице var $cols = $table.find('tbody >tr:first>td').length; // Добавляем строку в начало таблицы для select $table.find('thead').prepend("<tr></tr>"); // Добавляем select-ы в шапку таблицы function add_select ($v) { for( var $i = 0; $i < $v; $i++) { $table.find('thead >tr:first').append("<td><select id='"+$i+$i+"'></select></td>"); } } // Заполняем select-ы данными function in_select ($v) { for( var $i = 0; $i < $v; $i++) { var sel_num = $i; $table.find('tbody tr').each(function(){ $(this).children('td').each(function(td_num){ if(td_num==sel_num){ var text_td = $(this).text(); $("#"+sel_num+sel_num).append("<option>"+text_td+"</option>"); } }); }); // Удаляем похожие строки $("#"+sel_num+sel_num+" option").each(function() { var text_option = $(this).text(); var options = $('option'); var alf = $(this); var i = -1; options.each(function() { if ( ($(this).text() == alf.text() )&& (++i>0) ) alf.remove() }) }); } } // Добавляем первые пустые option вselect-ы function add_optionfalse ($v) { for( var $i = 0; $i < $v; $i++) { $("#"+$i+$i).prepend("<option></option>"); } } // Добавляем фильтрацию по select-ам function add_filters ($v) { for( var $i = 0; $i < $v; $i++) { // Добавляем фильтрацию var filter = $("#"+$i+$i); filter.change(function(e) { var niddle = $(this).val(); $table.find("tbody> tr").filter(function() { if (!$(this).find("td:eq("+$i+")").is(':contains("' + niddle + '")')) { return true; } else { $(this).show(); return false; } }).hide(); }); } } add_select ($cols); in_select ($cols); add_optionfalse ($cols); add_filters ($cols); }; })( jQuery ); |
Hedkost,
:write: |
Цитата:
find("td:eq("+$i+")") $i берется из замыкания, а там на момент вызова уже цикл полностью отработал и $i всегда равно последнему значению счетчика и в наборе ничего не фильтруется. Поэтому hide() обрабатывает весь набор. Как я понимаю $i должен быть равен номеру столбца. Как вариант можно брать его из id селекта. |
Плагин для фильтрации строк таблиц
экспромт на заданную тему
<!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} .git{width:700px;margin:0px auto} div{height:250px} td{background:#000} td,th{border:1px solid #555555;color:#FFF;padding:10px;text-align:left} .zebra tr:nth-child(2n) td{background:#383838} tr:nth-child(1) td:hover,tr:nth-child(1) th: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-image:-webkit-linear-gradient(top,#E6E6FA,#696969);background:linear-gradient(to bottom,#E6E6FA,#696969)} tr:nth-child(1) td,tr:nth-child(1) th{font-weight:bold;background-image:-webkit-gradient(linear,left,right,color-stop(0,#00008B),color-stop(1,#0060BF));background-image:-ms-linear-gradient(left,#00008B,#0060BF);background-image:-o-linear-gradient(left,#00008B,#0060BF);background-image:-moz-linear-gradient(left,#00008B,#0060BF);background-image:-webkit-linear-gradient(left,#00008B,#0060BF);background:linear-gradient(to right,#00008B,#0060BF)} .zebra tr:nth-child(n +2):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-image:-webkit-linear-gradient(left,#D2691E,#DEB887);background:linear-gradient(to right,#D2691E,#DEB887)} table{border-collapse:collapse;border-spacing:0;box-shadow:0 2px 1px 5px rgba(242,242,242,0.1);width:100%} </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), $thead = $table.find('thead'); !$thead.length && ($thead = $('<thead/>').prependTo($table)); var $tr = $('<tr/>').prependTo($thead), hide = {}; $("tbody tr:first>", $table).each(function(indx, element) { var range = ['Без выбора'], $td = $("tbody tr :nth-of-type(" + (indx + 1) + ")", $table), temp = {}; $td.each(function(i, el) { var text = $(this).text() if (!temp[text]) { range.unshift(text); temp[text] = true }; }); var $select = $('<select/>', { 'change': function() { var val = this.value; hide[indx] = []; this.selectedIndex && $td.each(function(i, el) { $(this).text() != val && hide[indx].push(i) }); var range = []; for (var k in hide) range = range.concat(hide[k]); var $tr = $("tbody tr", $table); $tr.show(); $.each(range, function(i, el) { $tr.eq(el).hide() }); } }); $.each(range, function() { $('<option/>', { text: this }).prependTo($select); }); $('<td/>').append($select).appendTo($tr); }); }); }; </script> </head> <body> <br> <table class="zebra git" > <tbody> <tr class="t_head" id="1"> <th style="width: 70px;">Период</th> <th style="width: 15px;">test</th> <th>DBL</th> <th>SGL</th> </tr> <tr> <td>Date</td> <td>Start time</td> <td>End time</td> <td>Name</td> </tr> <tr> <td>02.06.2010</td> <td>10:00</td> <td>12:00</td> <td>Cleaning</td> </tr> <tr> <td>02.06.2010</td> <td>12:00</td> <td>15:00</td> <td>Training</td> </tr> <tr> <td>02.06.2010</td> <td>15:00</td> <td>17:00</td> <td>Rest</td> </tr> <tr> <td>02.06.2010</td> <td>17:00</td> <td>21:00</td> <td>Work</td> </tr> <tr> <td>02.06.2010</td> <td>21:00</td> <td>07:00</td> <td>Sleep</td> </tr> </tbody> </table> </body> </html> |
Спасибо ребят, сейчас буду разбираться
|
Часовой пояс GMT +3, время: 08:59. |