bootstrap-table 如何使用搜索和过滤? [英] How bootstrap-table to use search and filter?

问题描述

我正在使用引导程序绘制表格，并且需要搜索和过滤功能.但是我添加了过滤功能后，搜索功能就不能用了.当我删除行"时，搜索功能工作，但过滤功能消失，如何使用这两个功能?代码如下:

<div id="filter-bar"></div><table id="tbl" data-height="299" data-show-toggle="true" data-show-columns="true" data-show-export="true" data-select-item-name=工具栏1"><头><tr><th data-field="id" data-align="right" data-sortable="true">项目ID</th><th data-field="name" data-align="center" data-sortable="true">项目名称</th><th data-field="price" data-align="" data-sortable="true">商品价格</th></tr></thead><link rel="stylesheet" href="/static/libs/bootstrap3/css/bootstrap.min.css"><link rel="stylesheet" href="/static/libs/bootstrap3/css/bootstrap-theme.min.css"><link rel="stylesheet" href="/static/libs/bootstrap-table-master/src/bootstrap-table.css"><link rel="stylesheet" href="/static/libs/jasny-bootstrap/css/jasny-bootstrap.min.css"><link rel="stylesheet" href="/static/libs/bootstrap-table-master/src/extensions/filter/bootstrap-table-filter.css"><script type="text/javascript" src="/static/libs/jquery2/jquery-2.0.3.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script><script type="text/javascript" src="/static/libs/bootstrap-table-master/src/bootstrap-table.js"></script><script type="text/javascript" src="/static/libs/bootstrap-table-master/src/extensions/filter/bootstrap-table-filter1.js"></script><script type="text/javascript" src="/static/libs/bootstrap-table-master/src/extensions/filter/bootstrap-table-filter.js"></script><script type="text/javascript" src="/static/libs/bootstrap-table-master/src/extensions/filter/bs-table.js"></script><script type="text/javascript" src="/static/libs/bootstrap-table-master/src/extensions/export/bootstrap-table-export.js"></script><script type="text/javascript" src="/static/libs/bootstrap-table-master/src/extensions/export/tableExport.js"></script><script type="text/javascript" src="/static/libs/bootstrap-table-master/src/extensions/export/jquery.base64.js"></script><script type="text/javascript">$(document).ready(function () {$("#tbl").bootstrapTable({网址:tbl_data.json"，方法:获取"，显示过滤器:真，搜索:真的，查询参数:函数(p){返回{设备:'iphone'，日期:'2014-12-13'，};}});});

解决方案

$(document).ready(function () {(功能($){$('#filter').keyup(function () {var rex = new RegExp($(this).val(), 'i');$('.searchable tr').hide();$('.searchable tr').filter(function () {返回 rex.test($(this).text());}).展示();})}(jQuery));});

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script><link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><div class="input-group"><span class="input-group-addon">过滤器</span><input id="filter" type="text" class="form-control" placeholder="Type here...">

<table class="table table-striped"><头><tr><th>代码</th><th>姓名</th><th>默认</th><th>状态</th></tr></thead><tbody class="searchable"><tr><td>欧元</td><td>欧元</td><td></td><td>主动</td></tr><tr><td>英镑</td><td>英镑</td><td></td><td>主动</td></tr><tr><td>凝胶</td><td>格鲁吉亚拉里</td><td><span class="glyphicon glyphicon-ok"></span></td><td>主动</td></tr><tr><td>美元</td><td>美元</td><td></td><td>主动</td></tr></tbody></table>

来自此处

的示例

I'am using bootstrap to draw a table, and I need both search and filter function. But the search function can not work after I add filter function. when I delete the row "", the search function work, but filter function disappear, how the use both the function? Here is the code:

<div id="filter-bar"></div>
<table id="tbl" data-height="299" data-show-toggle="true" data-show-columns="true" data-show-export="true" data-select-item-name="toolbar1">
    <thead>
    <tr>
        <th data-field="id" data-align="right" data-sortable="true">Item ID</th>
        <th data-field="name" data-align="center" data-sortable="true">Item Name</th>
        <th data-field="price" data-align="" data-sortable="true">Item Price</th>
    </tr>
    </thead>
</table>
  <link rel="stylesheet" href="/static/libs/bootstrap3/css/bootstrap.min.css">
  <link rel="stylesheet" href="/static/libs/bootstrap3/css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="/static/libs/bootstrap-table-master/src/bootstrap-table.css">
  <link rel="stylesheet" href="/static/libs/jasny-bootstrap/css/jasny-bootstrap.min.css">
  <link rel="stylesheet" href="/static/libs/bootstrap-table-master/src/extensions/filter/bootstrap-table-filter.css">
  <script type="text/javascript" src="/static/libs/jquery2/jquery-2.0.3.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="/static/libs/bootstrap-table-master/src/bootstrap-table.js"></script>
<script type="text/javascript" src="/static/libs/bootstrap-table-master/src/extensions/filter/bootstrap-table-filter1.js"></script>
<script type="text/javascript" src="/static/libs/bootstrap-table-master/src/extensions/filter/bootstrap-table-filter.js"></script>
<script type="text/javascript" src="/static/libs/bootstrap-table-master/src/extensions/filter/bs-table.js"></script>
<script type="text/javascript" src="/static/libs/bootstrap-table-master/src/extensions/export/bootstrap-table-export.js"></script>
<script type="text/javascript" src="/static/libs/bootstrap-table-master/src/extensions/export/tableExport.js"></script>
<script type="text/javascript" src="/static/libs/bootstrap-table-master/src/extensions/export/jquery.base64.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $("#tbl").bootstrapTable({
            url: "tbl_data.json",
            method: "get",
            showFilter: true,
            search: true,
            queryParams: function (p) {
                return{
                    device: 'iphone',
                    mdate: '2014-12-13',
                };
            }
        });
    });

解决方案

$(document).ready(function () {

    (function ($) {

        $('#filter').keyup(function () {

            var rex = new RegExp($(this).val(), 'i');
            $('.searchable tr').hide();
            $('.searchable tr').filter(function () {
                return rex.test($(this).text());
            }).show();

        })

    }(jQuery));

});

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="input-group"> <span class="input-group-addon">Filter</span>

    <input id="filter" type="text" class="form-control" placeholder="Type here...">
</div>
<table class="table table-striped">
    <thead>
        <tr>
            <th>Code</th>
            <th>Name</th>
            <th>Default</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody class="searchable">
        <tr>
            <td>EUR</td>
            <td>EURO</td>
            <td></td>
            <td>Active</td>
        </tr>
        <tr>
            <td>GBP</td>
            <td>Pound</td>
            <td></td>
            <td>Active</td>
        </tr>
        <tr>
            <td>GEL</td>
            <td>Georgian Lari</td>
            <td><span class="glyphicon glyphicon-ok"></span>
            </td>
            <td>Active</td>
        </tr>
        <tr>
            <td>USD</td>
            <td>US Dollar</td>
            <td></td>
            <td>Active</td>
        </tr>
    </tbody>
</table>

Example From Here

这篇关于bootstrap-table 如何使用搜索和过滤?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！