Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.04.2014, 13:49
Интересующийся
Отправить личное сообщение для Hedkost Посмотреть профиль Найти все сообщения от Hedkost
 
Регистрация: 25.02.2014
Сообщений: 10

Фильтр в таблице по 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 );
Ответить с цитированием
  #2 (permalink)  
Старый 05.04.2014, 14:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Hedkost,
строка 56 переменная sel_num неопределена
Ответить с цитированием
  #3 (permalink)  
Старый 05.04.2014, 14:20
Интересующийся
Отправить личное сообщение для Hedkost Посмотреть профиль Найти все сообщения от Hedkost
 
Регистрация: 25.02.2014
Сообщений: 10

ок, спасибо большое
Ответить с цитированием
  #4 (permalink)  
Старый 05.04.2014, 14:32
Интересующийся
Отправить личное сообщение для Hedkost Посмотреть профиль Найти все сообщения от Hedkost
 
Регистрация: 25.02.2014
Сообщений: 10

Исправил, теперь при изменении в любом селекте все данные таблицы пропадают
$(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 );
Ответить с цитированием
  #5 (permalink)  
Старый 05.04.2014, 14:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Hedkost,
Ответить с цитированием
  #6 (permalink)  
Старый 05.04.2014, 16:29
Профессор
Отправить личное сообщение для jsnb Посмотреть профиль Найти все сообщения от jsnb
 
Регистрация: 15.03.2014
Сообщений: 561

Сообщение от Hedkost Посмотреть сообщение
Исправил, теперь при изменении в любом селекте все данные таблицы пропадают
58 строка:
find("td:eq("+$i+")")

$i берется из замыкания, а там на момент вызова уже цикл полностью отработал и $i всегда равно последнему значению счетчика и в наборе ничего не фильтруется. Поэтому hide() обрабатывает весь набор. Как я понимаю $i должен быть равен номеру столбца. Как вариант можно брать его из id селекта.

Последний раз редактировалось jsnb, 05.04.2014 в 16:36.
Ответить с цитированием
  #7 (permalink)  
Старый 05.04.2014, 17:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Плагин для фильтрации строк таблиц
экспромт на заданную тему
<!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>

Последний раз редактировалось рони, 04.02.2018 в 19:58.
Ответить с цитированием
  #8 (permalink)  
Старый 06.04.2014, 12:58
Интересующийся
Отправить личное сообщение для Hedkost Посмотреть профиль Найти все сообщения от Hedkost
 
Регистрация: 25.02.2014
Сообщений: 10

Спасибо ребят, сейчас буду разбираться
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Фильтр для таблицы через select-ты! Hedkost jQuery 1 25.02.2014 16:39
Фильтр select на jquery dsk8m jQuery 2 21.01.2014 19:43
Помогите преобразовать фильтр таблицы под select greencard jQuery 2 21.08.2013 12:36
Метод для конвертирования едениц px, em, %, pt. jegit Элементы интерфейса 0 07.03.2013 16:15
Проблема с динамическим формированием select elepsion jQuery 1 31.10.2010 14:31