JQueryMobile实现表格的条件筛选

使用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">

JQueryMobile实现表格的条件筛选

推荐阅读更多精彩内容