bootstrap表格分页功能

bootstrap-table有两种分页方式：

1、前端分页：数据库查询所有的数据，也就是数据一次性加载出来，在前端进行分页。

2、后端分页：每次向后台请求页数，也就是每次只查询当前页面加载所需要的那几条数据。

推荐后端分页

后端分页实例

      $(document).ready(function () {
              baseZuJian.bootstrapTableInit('#grid-table-fajiaoxinxi', {
                  url: '@Url.Action("GetFaJiaoListData", "FaJiaoXinXiList")',
                  toolbar: '#toolbar-fajiaoxinxi',
                queryParams: function (params) {
                    var temp = {
                        TiaoGuoHang: params.offset,
                        HuoQuHang: params.limit,
                        LikePiHao: $("#LikePiHao").val(),
                    };
                    return temp;
                },
                  columns: [{
                      field: 'Id',
                      title: '操作',
                      formatter: actionFormatter
                  },{
                        field: 'Fajiaopihao',
                        title: '发酵批号',
                    }, {
                        field: 'Junzhongmingcheng',
                        title: '菌种名称',
                    },{
                        field: 'Youdaonongdu',
                        title: '诱导浓度',
                    },{
                        field: 'Fangguanriqi',
                        title: '放罐日期',
                    }, {
                        field: 'Shifouzirong',
                        title: '是否自溶',
                    }, {
                        field: 'FangguanOD',
                        title: 'OD',
                    }, {
                        field: 'Guhanliang',
                        title: '固含量(%)',
                      }, {
                          field: 'Meihuo',
                          title: '酶活',
                      },{
                        field: 'Guanjiancaoazuohebeizhu',
                        title: '备注',
                    }
                ]
                });
          })

 public class FaJiaoXinXiSearchDto :PageDto
    {
        public int? Id { set; get; }

        public string IdList { get; set; }

        public string PihaoList { get; set; }

        public string Guanlianhao { set; get; }

        public string LikePiHao { set; get; }

        public string PiHao { set; get; }

        public string Zhongzipeiyangxinxi { set; get; }

    }



  public class PageDto
    {
        /// <summary>
        /// 跳过行数
        /// </summary>
        public int? TiaoGuoHang { get; set; }


        /// <summary>
        /// 获取最大行数
        /// </summary>
        public int? HuoQuHang { get; set; }

        /// <summary>
        /// 排序字段
        /// </summary>
        public string PaiXuZiDuan { get; set; }


        /// <summary>
        /// 排序方向
        /// </summary>
        public string PaiXuFangXiang { get; set; }
    }

  public JsonResult GetFaJiaoListData(FaJiaoXinXiSearchDto searchDto)
        {
            searchDto.HuoQuHang = searchDto.HuoQuHang ?? 20;
            FenYeJieGuoDto<List<tbfjsjk_fajiaoxinxi>> results = _faJiaoXinXiYeWu.GetFenYeList(searchDto);
            if (results == null || results.Total <= 0)
                return Json(new { total = 0, rows = new ArrayList() }, JsonRequestBehavior.AllowGet);

            ArrayList rows = new ArrayList();
            foreach (var item in results.List)
            {
                rows.Add(new
                {
                    Id = item.Id,
                    Fajiaopihao = item.Fajiaopihao,
                    Junzhongmingcheng = item.Junzhongmingcheng,
                    Youdaonongdu = item.Youdaonongdu,
                    Fangguanriqi = item.Fangguanriqi?.ToString("yyyy-MM-dd HH:mm"),
                    Shifouzirong = item.Shifouzirong,
                    FangguanOD = item.FangguanOD,
                    Guhanliang = item.Guhanliang,
                    Guanjiancaoazuohebeizhu = item.Guanjiancaoazuohebeizhu,

                    Peiyangji = item.Peiyangji,
                    PHdianji = item.PHdianji,
                    Rongyangdianji = item.Rongyangdianji,
                    Meihuo = item.Meihuo,
                    IsFaJiaoRenYuan = OASession.user.Bumensub == "蛋白质制备"
                });

            }

            var jsonData = new
            {
                total = results.Total,
                rows = rows
            };

            return Json(jsonData, JsonRequestBehavior.AllowGet);

        }

base.js代码如下：

baseZuJian = {
    bootstrapTableInit: function (target, options) {
        var defaultOpts = {
            showHeader: true,     //是否显示列头
            showLoading: true,
            undefinedText: '',
            showFullscreen: false,
            toolbarAlign: 'left',
            paginationHAlign: 'right',
            silent: true,
            method: 'get',                      //请求方式（*）
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: false,                     //是否启用排序
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 20,                       //每页的记录行数（*）
            pageList: [20, 30, 40],        //可供选择的每页的行数（*）
            search: false,                      //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: true,
            showColumns: false,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 0,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            uniqueId: "Id",                     //每一行的唯一标识，一般为主键列
            showToggle: false,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            showExport: true,
            exportDataType: "selected",        //导出checkbox选中的行数
            paginationLoop: false,             //是否无限循环
            singleSelect: false               //单行选择单行,设置为true将禁止多选
        };

        var opts = Object.assign({}, defaultOpts, options);

        if (opts.toolbar) {
            $(opts.toolbar).find("#query").click(function () {
                $(target).bootstrapTable('refresh', { query: { offset: 0, limit: opts.pageSize }, pageNumber: 1, pageSize: opts.pageSize });
            });

            $(opts.toolbar).find("#clearQuery").click(function () {
                $(opts.toolbar).find("input[type!=radio],select").each(function () {
                    $(this).val("");
                });

                $(target).bootstrapTable('refresh', { query: { offset: 0, limit: opts.pageSize }, pageNumber: 1, pageSize: opts.pageSize });
            });

            if (!opts.queryParams) {
                //查询 参数
                opts = Object.assign({}, opts, {
                    queryParams: function (params) {
                        var queryParamsData = params;
                        $(opts.toolbar).find("input[type=text],select").each(function () {
                            if ($(this).attr("id")) {
                                queryParamsData[$(this).attr("id")] = $(this).val();
                            }
                        });
                        queryParamsData.TiaoGuoHang = params.offset;
                        queryParamsData.HuoQuHang = params.limit;
                        console.log("bootstrapTable queryParams", queryParamsData);
                        return queryParamsData;
                    }
                });
            }
        }

        $(target).bootstrapTable(opts);
    },
    FaQiRenTiJiaoHouCheHui: function (targetId) {
        var remainSecond = $("#" + targetId).data("remain");

        if (!$.isNumeric(remainSecond) || remainSecond<=0)
            return;

        var $target = $("#" + targetId);
        var interval=  setInterval(function () {
            remainSecond = remainSecond - 1;
            $target.text("撤 回" + remainSecond + "s");

            if (remainSecond <= 0) {
                clearInterval(interval);
                //$target.hide();
                location.reload();
            }
                
        }, 1000);
    }
}