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