bootstrap table 服務端分頁

前端js

    $(function () {
            //$('#MDTable').bootstrapTable('destroy');
            $("#MDTable").bootstrapTable({    //'destroy' 是必須要加的==作用是加載服務器數據，初始化表格的內容Destroy the bootstrap table.
                toolbar: '#toolbar', //工具按鈕用哪個容器
                method: 'get',
                url: "/MD_All/MD_Data",
                contentType: "application/x-www-form-urlencoded",
                dataType: "json",
                pagination: true, //是否顯示分頁（*）
                striped: true,//隔行換色
                sidePagination: 'server',//分頁方式
                pageNumber: 1,//初始化table時顯示的頁碼
                pageSize: 5,//每頁條目                    
                pageList: [5, 10, 20, 50, 100],
                //queryParams: queryParams,
                locale: 'zh-CN',
                sortable: true,//排序                    
                showColumns: true,//是否顯示 內容列下拉框                    
                clickToSelect: true,//點擊選中checkbox
                singleSelect: true,//啟用單行選中                    
                showExport: true,                     //是否顯示導出
                exportDataType: "all",              //basic', 'all', 'selected'.
                queryParamsType: "", //默認值為 'limit' ,在默認情況下 傳給服務端的參數為：offset,limit,sort
                // 設置為 ''  在這種情況下傳給服務器的參數為：pageSize,pageNumber
                queryParams: function queryParams(params) {   //設置查詢參數  
                    var param = {
                        pageNumber: params.pageNumber,
                        pageSize: params.pageSize,
                    };
                    return param;
                },
                columns: [
                    {
                        field: 'MaterialID',
                        title: '物料號'
                    }, {
                        field: 'OldMaterialID',
                        title: '舊物料號'
                    }, {
                        field: 'IndustryFeild',
                        title: '行業領域'
                    }]                                
            });
    });

 

后端

        public ActionResult MD_Data()
        {
            try
            {int pageSize = Request["pageSize"] == null ? 2 : int.Parse(Request["pageSize"]);
                int pageNumber = Request["pageNumber"] == null ? 1 : int.Parse(Request["pageNumber"]);

                var list = _unitOfWork.MD_All.Get();
                List<MD_All> lst = new List<MD_All>();
                var array = list.ToArray();
                for (int i = (pageNumber - 1) * pageSize; i < pageNumber * pageSize && i < array.Length; i++)
                {
                    lst.Add(array[i]);
                }
                int total = list.Count();

　　　　　　　　　 //這里需要返回給前端總數和列表信息 需要把json組合下
                JsonObj obj = new JsonObj() { rows = lst, total = total };
                
                return Json(obj, JsonRequestBehavior.AllowGet);
            }
            catch (Exception ex)
            {
                //獲取信息出錯
                return Json("false");
            }
        }

 

 這是要組合的json格式

public class JsonObj
    {

        public List<MD_All> rows { get; set; }
        public int total { get; set; }

    }

分頁問題匯總

http://www.jb51.net/article/85373.htm

 

參考文章

http://blog.csdn.net/lzx_longyou/article/details/50563907

http://blog.csdn.net/cslp517/article/details/50505445

http://blog.csdn.net/u013425609/article/details/51435731

http://blog.csdn.net/hanxue_tyc/article/details/54917227

表格參數

http://blog.csdn.net/rickiyeat/article/details/56483577

 

二、篩選條件后的table數據也是進行了分頁處理，但是點擊第二頁時，篩選條件並未傳入后端

 

queryParams: function queryParams(params) {   //設置查詢參數
                    var param = {
                        pageNumber: params.pageNumber,
                        pageSize: params.pageSize,
                        MaterialID: $("#MaterialID").val(),
                        Factory: $("#Factory").val(),
                        MaterialType: $("#MaterialType").val(),
                        LogStartDate: $("#LogStartDate").val(),
                        LogEndDate: $("#LogEndDate").val(),
                        FileName: $("#FileName").val(),
                        Status: $("#Status").val()
                    };
                    return param;
                },

在分頁傳入的params中加入篩選的條件，后端即可獲得數據，篩選條件分頁OK

 

參考

https://www.cnblogs.com/ziyoublog/p/9055790.html