使用JQueryMobile做表格的条件筛选异常简单，以前是使用改变Mysql的查询条件来做筛选得到过滤后的结果，使用JQueryMobile则是在页面显示后本地做CSS改变：
\\引用JQuery和JQueryMobile
<script>window.jQuery || document.write('<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"><\/script><script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"><\/script>')</script>
<select id="filterTable-input">
<option value="" selected="selected">全部</option>
<option value="小区">小区</option>
<option value="家政">家政</option>
</select>
<table width="100%" data-role="table" data-mode="columntoggle" data-filter="true" data-input="#filterTable-input" id="Phone" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-btn-text="显示...">
<thead>
<tr>
<th style='text-align: left;vertical-align:middle;'>类别</th>
<th style='text-align: left;vertical-align:middle;'>姓名/机构名</th>
<th></th>
<th style='text-align: right;vertical-align:middle;'>欢迎度</th>
</tr>
</thead>
<tbody>
<tr id='1'>
<td style='text-align: left;vertical-align:middle;'>小区</td>
<td style='text-align: left;vertical-align:middle;'><a href='Show_Phone.php?id=1'>花城物业</a></td>
<td style='text-align: left;vertical-align:middle;'>机构</td>
<td style='text-align: right;vertical-align:middle;'><span class='ui-btn ui-btn-inline ui-icon-heart ui-btn-icon-right' id='R_Useful'>1</span></td>
</tr>
<tr id='2'>
<td style='text-align: left;vertical-align:middle;'>家政</td>
<td style='text-align: left;vertical-align:middle;'><a href='Show_Phone.php?id=2'>曹阿姨</a></td>
<td style='text-align: left;vertical-align:middle;'>女</td>
<td style='text-align: right;vertical-align:middle;'><span class='ui-btn ui-btn-inline ui-icon-heart ui-btn-icon-right' id='R_Useful'>2</span></td>
</tr>
</tbody>
</table>
效果：
2018-03-23_095854.jpg
2018-03-23_095939.jpg
如果想将下拉列表变成搜索框，只要将<select>部分变成：
<input id="filterTable-input" data-type="search">
