Как мне использовать data-filtertext в таблице с использованием Jquery Mobile 1.4, где ячейки содержат входные данные?
У меня есть таблица, которую я хотел бы отфильтровать, используя новый фильтруемый виджет в JQM 1.4. Каждая ячейка таблицы содержит вход, который я использую для обновления базы данных на "изменение".
Я добавил атрибут data-filtertext для каждого элемента, но кажется, что фильтр работает только в первой строке (после ввода более одной буквы во входе фильтра строки не возвращаются).
Я пытался прикрепить пользовательский фильтр, но я должен делать это неправильно... потому что он не срабатывает.
Некоторые входные данные пусты, поэтому я удалил атрибут data-filtertext='', но это не помогло.
Вот код моего теста:
<html>
<head>
<title>Test Table Filter</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.js"> </script>
</head>
<body>
<div data-role='page'>
<div data-role='content'>
<form>
<input id="venue_filterTable-input" data-type="search" />
</form>
<table id='venueTable' class='ui-responsive' data-role='table' data-filter='true' data-input='#venue_filterTable-input'
cellpadding='15' cellspacing='1'>
<thead>
<tr>
<th class='ui-btn ui-shadow ui-btn-inline ui-btn-up-a'>Club Name</th>
<th class='ui-btn ui-shadow ui-btn-inline ui-btn-up-a'>Contact</th>
<th class='ui-btn ui-shadow ui-btn-inline ui-btn-up-a'>Phone</th>
<th class='ui-btn ui-shadow ui-btn-inline ui-btn-up-a'>City</th>
<th class='ui-btn ui-shadow ui-btn-inline ui-btn-up-a'>Last Called</th>
<th class='ui-btn ui-shadow ui-btn-inline ui-btn-up-a'>Next Call</th>
<th class='ui-btn ui-shadow ui-btn-inline ui-btn-up-a'>Notes</th>
<th class='ui-btn ui-shadow ui-btn-inline ui-btn-up-a'>Assigned To</th>
</tr>
</thead>
<tbody>
<tr>
<td data-filtertext='Fiddle Dee Dee'>
<input name="club_name" class='venue_input' value="Fiddle Dee Dee" placeholder="Club Name" data-idvenue='63' />
</td>
<td>
<input name="contact" class='venue_input' value="" placeholder="Contact" data-idvenue='63' />
</td>
<td data-filtertext='2535551213'>
<input name="phone" class="venue_input phone" value="2535551213" placeholder="Phone" data-idvenue='63' />
</td>
<td data-filtertext='Auburn'>
<input name="city" class='venue_input' value="Auburn" placeholder="City" data-idvenue='63' />
</td>
<td data-filtertext='2013-12-02'>
<input name="last_called" class='date venue_input' value="2013-12-02" placeholder="Last Called"
data-idvenue='63' />
</td>
<td data-filtertext='2014-01-02'>
<input name="next_call" class='date venue_input' value="2014-01-02" placeholder="Next Call" data-idvenue='63' />
</td>
<td data-filtertext='fiddle dee dee'>
<textarea name="notes" class='venue_input' placeholder="Notes" data-idvenue='63'>fiddle dee dee</textarea>
</td>
<td data-filtertext='Jojo'>
<input name="assigned_to" class='venue_input' value="Jojo" placeholder="Assigned To" data-idvenue='63' />
</td>
</tr>
<tr>
<td data-filtertext='Satellite'>
<input name="club_name" class='venue_input' value="Satellite" placeholder="Club Name" data-idvenue='61' />
</td>
<td ">
<input name="contact" class='venue_input' value="" placeholder="Contact" data-idvenue='61' />
</td>
<td data-filtertext='3605551212'>
<input name="phone" class="venue_input phone" value="3605551212" placeholder="Phone" data-idvenue='61' />
</td>
<td data-filtertext='Bremerton'>
<input name="city" class='venue_input' value="Bremerton" placeholder="City" data-idvenue='61' />
</td>
<td data-filtertext='2013-12-03'>
<input name="last_called" class='date venue_input' value="2013-12-03" placeholder="Last Called"
data-idvenue='61' />
</td>
<td data-filtertext='2014-01-03'>
<input name="next_call" class='date venue_input' value="2014-01-03" placeholder="Next Call" data-idvenue='61' />
</td>
<td ">
<textarea name="notes" class='venue_input' placeholder="Notes" data-idvenue='61'></textarea>
</td>
<td data-filtertext='agency'>
<input name="assigned_to" class='venue_input' value="agency" placeholder="Assigned To" data-idvenue='61' />
</td>
</tr>
<tr>
<td data-filtertext='Here In My Soup'>
<input name="club_name" class='venue_input' value="Here In My Soup" placeholder="Club Name" data-idvenue='62' />
</td>
<td ">
<input name="contact" class='venue_input' value="" placeholder="Contact" data-idvenue='62' />
</td>
<td data-filtertext='2535551212'>
<input name="phone" class="venue_input phone" value="2535551212" placeholder="Phone" data-idvenue='62' />
</td>
<td data-filtertext='Federal Way'>
<input name="city" class='venue_input' value="Federal Way" placeholder="City" data-idvenue='62' />
</td>
<td data-filtertext='2013-12-04'>
<input name="last_called" class='date venue_input' value="2013-12-04" placeholder="Last Called"
data-idvenue='62' />
</td>
<td data-filtertext='2014-01-06'>
<input name="next_call" class='date venue_input' value="2014-01-06" placeholder="Next Call" data-idvenue='62' />
</td>
<td data-filtertext='four piece or less; pays in scrapple'>
<textarea name="notes" class='venue_input' placeholder="Notes" data-idvenue='62'>four piece or less; pays in
scrapple</textarea>
</td>
<td ">
<input name="assigned_to" class='venue_input' value="" placeholder="Assigned To" data-idvenue='62' />
</td>
</tr>
</tbody>
</table>
</div>
<script>
$.mobile.document.one( "filterablecreate", "#venue_filterTable-input", function() {
$( "#venue_filterTable-input" ).filterable( "option", "filterCallback",
function( index,searchValue ) {
// custom filtering logic
alert($(this).find('input').val() );
});
});
</script>
</div>
</body>
</html>
Итак: как я могу получить фильтруемый виджет для фильтрации на основе содержимого ввода внутри каждого <td>? Если текст фильтра данных идет в <td> или тег ввода? (ни один, кажется, не работает для меня). При подключении пользовательского фильтра, должен ли идентификатор быть идентификатором входных данных поиска фильтра, или таблицы, или... что?
Вот ссылка на страницу: http://bandorama.us/test.html
Если вы введете F в поле поиска, отобразятся две строки (каждая из которых содержит букву "f"). Если вы введете больше символов, строки не будут возвращены.
1 ответ
Если вы используете фильтруемый виджет для таблицы, он будет фильтровать строки таблицы, поэтому, чтобы он работал с любым видом содержимого ячейки таблицы (текст, ввод), вы должны использовать **data-filtertext**Атрибут и установите текст для запроса в строке таблицы следующим образом:
<tr data-filtertext="foo_from_cell_1, bar_from_cell_2, baz_from_cell_3...">
<td>foo</td>
<td><div><p><span>bar</span></p></div></td>
<td><input type="text" value="baz"/></td>
</tr>
Таким образом, это будет работать.
Также проверьте пример, представленный в демонстрациях JQM