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>

View Code

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);
            }
        }

View Code

上面的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');
        });
    });

View Code