zoukankan      html  css  js  c++  java
  • Bootstrap表格分页(二)

    本文使用Bootstrap-table来对表格进行分页,关于Bootstrap-table以及下载插件包请点击官网:http://bootstrap-table.wenzhixin.net.cn

    首先,需要引用脚本:bootstrap-table.jsbootstrap-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
  • 相关阅读:
    BZOJ 2212/BZOJ 3702
    BZOJ 4761 Cow Navigation
    BZOJ 3209 花神的数论题
    BZOJ 4760 Hoof, Paper, Scissors
    BZOJ 3620 似乎在梦中见过的样子
    BZOJ 3940 Censoring
    BZOJ 3942 Censoring
    BZOJ 3571 画框
    BZOJ 1937 最小生成树
    BZOJ 1058 报表统计
  • 原文地址:https://www.cnblogs.com/ChrisLee2011/p/4289761.html
Copyright © 2011-2022 走看看