Bootstrap表格添加搜索欄

在學習了表格的分頁后，本文嘗試在表格頂部加入搜索欄，用來篩選表格的數據，先看一下效果：

未進行搜索時，有394條記錄：

在輸入乘車碼“1”和訂單號“20150120”后，只有28條記錄：

此處使用了兩個篩選條件：乘車碼和訂單號進行了模糊查詢，從而大大減少了表格的記錄數，以達到搜索的目的。

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>

可以注意到：在table中並沒有URL，因為在查詢的過程中參數可以是變化的，會在JavaScript中對URL做動態的綁定。JavaScript代碼如下：

$(function () {
            $('#testTable').bootstrapTable('refresh', { url: '/Home/GetPaginationData2' });
            $('#search').click(function () {
                var busNo = $('#busNo').val();
                var orderId = $('#orderId').val();
                $('#testTable').bootstrapTable('refresh', { url: '/Home/GetPaginationData2?orderId=' + orderId + '&busNo=' +busNo });
            });
            $('#reset').click(function() {
                $('#busNo').val('');
                $('#orderId').val('');
                $('#testTable').bootstrapTable('refresh', { url: '/Home/GetPaginationData2' });
            });
        });

其中三個函數對表格的URL進行了設定：

　　1. 初始化頁面時；

　　2. 點擊“搜索”按鈕，對URL添加了兩個參數：“orderId”和“busNo”，稍后在后台代碼中會對這兩個參數進行處理；

　　3. 點擊“重置”按鈕，將清空查詢條件，重新查詢表格數據。

后台代碼如下：

public JsonResult GetPaginationData2(string orderId, string busNo)
        {
            var offset = Request.Params["offset"] == null ? 0 : int.Parse(Request.Params["offset"]);
            var limit = Request.Params["limit"] == null ? 10 : int.Parse(Request.Params["limit"]);

            using (var context = new TestEntities())
            {
                int count;
                var q = (from a in context.Tickets
                    join b in context.Order on a.OrderId equals b.Id
                    select new
                    {
                        BusNo = a.BusNumber,
                        OrderId = b.Id,
                        OrderDate = b.OrderDateTime,
                    }).Where(
                        t => (string.IsNullOrEmpty(orderId) || t.OrderId.Contains(orderId)) &&
                            (string.IsNullOrEmpty(busNo) || t.BusNo.Contains(busNo)))
                    .Distinct()
                    .Pagination(offset, limit, out count);
                var data = q.ToList();
                return Json(new {rows = data, total = count}, JsonRequestBehavior.AllowGet);
            }
        }

下面是程序中會引用的CSS樣式，供參考：

.my-container {
    float: left;
    display: inline-block;
    margin-right:30px;
}

.myLabel-content ,.myText-content,.myBtn-content{
    float: left;
    display: inline-block;
    margin-left: 10px;
}
.myLabel-content,.myText-content input[type='text'],.myBtn-content .btn {
    height: 30px;
    font-size: 12px;
}
.myBtn-content .btn {
    margin-bottom: 10px;
}