我有一个表，我想使用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>还是输入标签中？ （似乎对我都不起作用）。附加自定义过滤器时，id应该是过滤器搜索输入的ID，还是表格，或者......什么？
以下是该页面的链接：http://bandorama.us/test.html
如果在搜索输入中键入F，则会显示两行（两行都包含字母'f'）。如果再输入任何字符，则不返回任何行。
答案 0 :(得分：0)
如果您在表格上使用filterable widget，则小部件将过滤表格行，以便使其适用于您应使用的任何类型的表格单元格内容（文本，输入） **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 demos
中提供的示例