Фильтр в таблице по 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, время: 05:05. |