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