Форум

Smip · #1 (**permalink**) 16.02.2013, 18:25

Здравствуйте, есть таблица которые выводит какие-то данные, использую библиотеку table.js взято с этого сайта http://www.javascripttoolbox.com/lib/table/index.php , на умеет делать фильтрацию и сортировку, собственно что мне и нужно. В выборке есть 2 вида выбора это input и select. У меня задача стоит сделать поиск по столбику, указав максимальную цену, в документации к библиотеки есть пример как такое сделать через select как то вот так

<select style='width:70px' onchange="Table.filter(this,this)">
<option value="function(){return true;}">All</option>
<option value="function(val){return parseFloat(val.replace(/\$/,''))&lt;=300;}">&lt;= 300</option>
</select>

Меня интересует как можно сделать тоже самое через input, то есть пользователь пишет 1000, и в таблице выбираются значения которые <1000 , сейчас могу просто вставить инпут в который вводишь 1000 он находит элементы со значением 1000

<input onkeyup='Table.filter(this,this)'   size='6' name='filter'>

помогите, как такое сделать?

рони · #2 (**permalink**) 16.02.2013, 20:14

Smip,
Ну как-то так ...

<!DOCTYPE HTML>
<html>
<head>
<script language="JavaScript" src="http://www.javascripttoolbox.com/libsource.php/table/source/table.js" type="text/javascript"></script>
  <title></title>
</head>
<body>
<table class="example">
<thead>
	<tr>
		<th colspan="5" >
		   Table filter<br>
		</th>
	</tr>
	<tr>
		<th>Index</th>
		<th>Numeric
<br /><input onkeyup='go(this)'   size='6' name='filter' value="300">
<script type="text/javascript">
function go(a)
{
   var v  = parseFloat(a.value)||1000;
   var f = {'filter': function(val){return parseFloat(val.replace(/\$/,''))<= v;}};
   Table.filter(a,f)
}
</script>
</th>
		<th>Text</th>
		<th>Currency</th>
		<th>Date</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>0</td>
		<td>860</td>
		<td>Bill</td>
		<td>$93.34</td>
		<td>2015-08-02</td>
	</tr>
	<tr>
		<td>1</td>
		<td>761.7</td>
		<td>Joe</td>
		<td>$30.04</td>
		<td>2013-10-26</td>
	</tr>
	<tr>
		<td>2</td>
		<td>436.2</td>
		<td>Bob</td>
		<td>$6.73</td>
		<td>2015-05-01</td>
	</tr>
	<tr>
		<td>3</td>
		<td>198.7</td>
		<td>Matt</td>
		<td>$11.34</td>
		<td>2014-07-12</td>
	</tr>
	<tr>
		<td>4</td>
		<td>600.3</td>
		<td>Mark</td>
		<td>$34.34</td>
		<td>2015-09-06</td>
	</tr>
	<tr>
		<td>5</td>
		<td>28.3</td>
		<td>Tom</td>
		<td>$47.34</td>
		<td>2015-02-02</td>
	</tr>
	<tr>
		<td>6</td>
		<td>779.6</td>
		<td>Jake</td>
		<td>$84.84</td>
		<td>2014-12-26</td>
	</tr>
	<tr>
		<td>7</td>
		<td>584.6</td>
		<td>Greg</td>
		<td>$67.34</td>
		<td>2013-11-13</td>
	</tr>
	<tr>
		<td>8</td>
		<td>745.2</td>
		<td>Adam</td>
		<td>$3.43</td>
		<td>2013-02-07</td>
	</tr>
	<tr>
		<td>9</td>
		<td>126</td>
		<td>Steve</td>
		<td>$87.64</td>
		<td>2015-01-24</td>
	</tr>
</tbody>
</table>


</body>

</html>

Smip · #3 (**permalink**) 16.02.2013, 21:18

Оууу.. спасибо Вам огромное, всё круто... только есть один нюанс, у меня в таблице иногда значения отсутствуют, и тогда такой поиск работает не верно. Первым делом я удалил с Вашего варианта value="300", когда страница загружается, всё хорошо. Когда пишу что-то в поле то тоже всё гуд, но когда я стираю всё к исходному значению, то пустые ячейки пропадают и никак их не вернуть... нужно как-то сделать чтобы все пустые ячейки по умолчанию удовлетворяли запрос, либо хотя бы сделать чтобы когда стираешь условия поиска, всё возвращалось на свои места. Я так понимаю надо колдовать над этой строчкой

var v  = parseFloat(a.value)||1000;

а пустые ячейки как-то так делаются у меня

<td></td>

И что я не пробовал писать, никак не находит, можно конечно их все забить 0, но эту таблицу смотрят очень тупые люди, и будут задавать лишние вопросы, почему там стоит 0, ведь цена 0 не может быть))

рони · #4 (**permalink**) 16.02.2013, 21:57

Smip,вариант если поле ввода пусто или начинается не с цифры фильтрации небудет

function go(a)
{
   var v  = parseFloat(a.value);
   var f = {'filter': function(val){
   if (!v) return true
   return parseFloat(val.replace(/\$/,''))<= v;}};
   Table.filter(a,f)
}

Smip · #5 (**permalink**) 16.02.2013, 22:50

Бомба! Всё работает так как и надо! Спасибо большое...

Smip · #6 (**permalink**) 23.02.2013, 03:07

Скажите, пожалуйста, а можно ли как-то сделать чтобы пустые ячейки тоже удовлетворяли условие поиска? просто суть проблемы в том что в таблице объявления, и иногда люди указывают цену, иногда нет. И когда клиенты делают поиск, то объявления без цены пропадают, хотя там много шансов что им подойдут, а из-за поиска они опускают остальные объявления из виду.

Форум

Справочник

Discord чат

Курсы javascript