Bootstrap表格分頁（二）

本文使用Bootstrap-table來對表格進行分頁，關於Bootstrap-table以及下載插件包請點擊官網：http://bootstrap-table.wenzhixin.net.cn

首先，需要引用腳本：bootstrap-table.js或bootstrap-table.min.js，以及bootstrap-table-zh-CN.js

HTML頁面內容如下：

<table data-toggle="table" data-url="/Home/GetPaginationData2" data-height="465" 
       data-side-pagination="server" data-pagination="true" data-page-list="[5,10,20,50]">
    <thead>
        <tr>
            <th data-field="BusNo" data-align="center">乘車碼</th>
            <th data-field="OrderId" data-align="center">訂單號</th>
            <th data-field="OrderDate" data-align="center" data-formatter="FormatDateTime">訂單日期</th>
        </tr>
    </thead>
</table>

data-toggle="table" 標記這是一個表格，並引用插件里的功能，data-pagination="true" 表示對表格進行分頁，並會調出分頁欄，data-side-pagination="server" 標記這是從后台進行分頁，data-page-list="[5,10,20,50]"表示每頁可以顯示5,10,20,50條記錄可選，列中的data-field綁定返回的數據屬性。data-url 表示使用URL的方式定位到數據，本文從后台獲得JSON格式的數據。返回的JSON中有兩個數據“rows”和“total”，“rows”是表格中的已在服務器端分頁的數據，“total”是數據記錄總數，前端插件會根據“total”計算出總的頁面數。后台代碼如下：

        public JsonResult GetPaginationData2()
        {
            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,
                         }).Pagination(offset, limit, out count);
                var data = q.ToList();
                return Json(new {rows = data, total = count}, JsonRequestBehavior.AllowGet);
            }
        }

上面的Pagination函數請參考我的另外一篇博文：http://www.cnblogs.com/ChrisLee2011/p/4286069.html

由於之前使用過EasyUI，所以習慣以數據綁定的方式獲取后台數據，而且Bootstrap-table獲取數據的方式也是多樣的，更詳細的使用請參考官網。

提示：Bootstrap-table目前有一個缺陷，當resize瀏覽器窗口的時候，表的head不能自適應，解決的方法是在bootstrap-table.js的源碼中的頁面初始化處添加如下代碼：

$(function () {
        $('[data-toggle="table"]').bootstrapTable();

        //添加如下代碼
        $(window).resize(function () {
            $('[data-toggle="table"]').bootstrapTable('resetView');
        });
    });