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>ですか? data-filtertext を<td>入力タグまたは入力タグに入れる必要がありますか? （どちらも私にはうまくいかないようです）。カスタム フィルターをアタッチする場合、id はフィルター検索入力の id、またはテーブルの id にする必要がありますか?
ページへのリンクは次のとおりです: http://bandorama.us/test.html
検索入力に F を入力すると、2 つの行が表示されます (両方とも文字 'f' を含む)。それ以上の文字を入力すると、行は返されません。