ASP.NET MVC 结合bootstrap-table-实现服务端分页

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",//必须要有!!!! ,测试了下不是必须的
                //请求方法
                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///分页返回的行数
                    };              

将自己的平时总结经验分享给大家,有不足的地方也希望大家指出来

猜你喜欢

转载自blog.csdn.net/qq_42335551/article/details/83617037
今日推荐