Bootstrap表格添加搜索栏

在学习了表格的分页后，本文尝试在表格顶部加入搜索栏，用来筛选表格的数据，先看一下效果：

未进行搜索时，有394条记录：

Bootstrap表格添加搜索栏

在输入乘车码“1”和订单号“20150120”后，只有28条记录：

Bootstrap表格添加搜索栏

此处使用了两个筛选条件：乘车码和订单号进行了模糊查询，从而大大减少了表格的记录数，以达到搜索的目的。

HTML页面代码如下：

<div id="toolbar">
    <div class="my-container">
        <label class="myLabel-content">乘车码：</label>
        <div class="myText-content">
            <input id="busNo" type="text" class="form-control" placeholder="输入乘车码">
        </div>
    </div>
    <div class="my-container">
        <label class="myLabel-content">订单号：</label>
        <div class="myText-content">
            <input id="orderId" type="text" class="form-control" placeholder="输入订单号">
        </div>
    </div>
    <div class="myBtn-content">
        <button id="search" type="button" class="btn btn-primary">搜索</button>
        <button id="reset" type="button" class="btn btn-default">重置</button>
    </div>
</div>
<table id="testTable" data-toggle="table" data-height="530"
       data-striped="true" data-classes="table table-hover" data-toolbar="#toolbar"
       data-side-pagination="server" data-pagination="true" data-page-list="[10,20,50,100]">
    <thead>
        <tr>
            <th class="col-md-3" data-field="BusNo" data-align="center">乘车码</th>
            <th class="col-md-5" data-field="OrderId" data-align="center">订单号</th>
            <th class="col-md-4" data-field="OrderDate" data-align="center" data-formatter="FormatDateTime">订单日期</th>
        </tr>
    </thead>
</table>

View Code