使用JQueryMobile做表格的條件篩選異常簡單，以前是使用改變Mysql的查詢條件來做篩選得到過濾后的結(jié)果，使用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="小區(qū)">小區(qū)</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;'>姓名/機(jī)構(gòu)名</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;'>小區(qū)</td>
                    <td style='text-align: left;vertical-align:middle;'><a href='Show_Phone.php?id=1'>花城物業(yè)</a></td>
                    <td style='text-align: left;vertical-align:middle;'>機(jī)構(gòu)</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">