I have a table which I would like to filter using the new filterable widget in JQM 1.4. Each cell of the table contains an input, which I use to update a database on "change".
I added the data-filtertext attribute to each element, but the filter only seems to work on the first row (after more than one letter has been typed in the filter input no rows are returned).
I tried to attach a custom filter but I must be doing that wrong... because it doesn't fire.
Some inputs are empty, so I removed the data-filtertext='' attribute, but that didn't help.
Here's the code to my test:
<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>
So: how can I get the filterable widget to filter based on the contents of the input inside each <td>? Should the data-filtertext go in the <td> or the input tag? (neither seems to work for me). When attaching a custom filter, should the id be the id of the filter search input, or the table, or ... what?
Here's a link to the page: http://bandorama.us/test.html
If you type F into the search input, two rows are displayed (both containing the letter 'f'). If you type any more characters, no rows are returned.
If you use the filterable widget on a table, the widget will filter table rows, so to make it work with any kind of table cell content (text, input) you should use the
**data-filtertext**-attribute and set the text to be queried on the table row like so:This way it will work.
Also check the example provided in the JQM demos