bootstrap-table展示数据很好用,但是当数据量很大时,存在性能问题。bootstrap-table需要分页的功能,需要时就请求数据,而不是一次性加载到客户端上。bootstrap-table前台默认时客户端分页,此时的分页已失去了应有的作用。因此使用服务端,话不多说,直接上代码
前台代码
@section Styles
{
//bootstrap-table.css bootstrap-table-pagejump.css,封装在BundleConfig.cs,好处将js压
缩,减少加载页面的负荷 然后在需要的页面调用 @Styles.Render
@Styles.Render("~/Content/ImgInfo")
}
同理 js
@section Styles
{
//bootstrap-table.js bootstrap-table-zh-CN.min.js,bootstrap-table-pagejump.js封装在 BundleConfig.cs,好处将js压缩,然后在需要的页面调用 @Styles.Render
@Styles.Render("~/Content/ImgInfo")
}
//在初始化table之前,要将table销毁,否则会保留上次加载的内容
$("#tab").bootstrapTable('destroy');
$('#tab').bootstrapTable({
//contentType: "application/x-www-form-urlencoded",//必须要有!!!! ,测试了下不是必须的
ajaxOptions: {
async: false // 如果设置为异步,需要等请求成功后才会生成下面的tr和td,就无法在td中添加按钮
},
//请求方法
method: 'post',
//是否显示行间隔色
striped: true,
//是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
cache: false,
//是否显示分页(*)
pagination: true,
//是否启用排序
sortable: true,
//排序方式
sortOrder: "asc",
//初始化加载第一页,默认第一页
pageNumber:1,
//每页的记录行数(*)
pageSize: 10,
//可供选择的每页的行数(*)
pageList: [10, 25, 50],
//这个接口需要处理bootstrap table传递的固定参数,并返回特定格式的json数据
data: [],
//是否显示搜索
search: false,
strictSearch: true,
idField: "PictureID",//作为唯一标示
showHeader: true,
showRefresh: false,
paginationShowPageGo: true,//是否跳转页码,这个需要扩展bootstrapTable.js插件,本身不支持
showToggle: true,//切换
showColumns: true,//显示列
onDblClickRow: function(row){//行的双击事件
ModalData(row.PictureID, row.ObjectID);
},
queryParamsType: 'limit',//查询参数组织方式
//queryParams: queryParams,//请求服务器时所传的参数
sidePagination: 'server',//指定服务器端分页
queryParams: function (params) {//自定义参数,这里的参数是传给后台的,我这是是分页用的
return {//这里的params是table提供的
//pageNumber : 当前页(必须)
//pageSize : 每页行数(必须)
pageNumber: params.offset / params.limit + 1,
pageSize:params.limit,
//这里可以加上其他参数
ObjectRelease: $("#ObjectRelease").val(),
State: $("#State").val(),
ObjectType: $("#ObjectName").find("option:selected").val(),
StartTime: $("#StartTime").val(),
UserList: $("#UserList").find("option:selected").text(),
};
},
columns: [
//{title: 'ID', field: 'ObjectID', align: 'center', valign: 'middle', sortable: true, visible: false },
{ title: '图片ID', field: 'PictureID', align: 'center', valign: 'middle',sortable: true },
{ title: '图片名称', field: 'PName', align: 'center', valign: 'middle', sortable: true },
{ title: '图片路径', field: 'PImgsrc', align: 'center', valign: 'middle', sortable: true },
{ title: '图片宽度', field: 'PWidth', align: 'center', valign: 'middle', sortable: true },
{ title: '图片高度', field: 'PHeight', align: 'center', valign: 'middle', sortable: true },
//{ title: '状态', field: 'Manage', align: 'center', valign: 'middle', sortable: true },
],
});
//查询按钮事件
$('#submit').click(function () {
$('#tab').bootstrapTable('refresh', { url: rootUrl + "Mark/Imgslist" });
})
后台 实现分页的核心代码
var fenyelist = Plist.OrderBy(x=>x.PictureID).Take(pageSize * pageNumber).Skip(pageSize * (pageNumber - 1)).ToList();
var fenye = new {
total = Plist.Count(),//数据的总量
rows = fenyelist///分页返回的行数
};
将自己的平时总结经验分享给大家,有不足的地方也希望大家指出来