ASP.NET MVC 結合bootstrap-table-實現服務端分頁
阿新 • • 發佈:2018-11-06
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///分頁返回的行數 };
將自己的平時總結經驗分享給大家,有不足的地方也希望大家指出來