1. 程式人生 > >ASP.NET MVC 結合bootstrap-table-實現服務端分頁

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///分頁返回的行數
                    };              

將自己的平時總結經驗分享給大家,有不足的地方也希望大家指出來