前端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,//点击选中checkboxsingleSelect: true,//启用单行选中                    showExport: true,                     //是否显示导出exportDataType: "all",              //basic', 'all', 'selected'.queryParamsType: "", //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort// 设置为 ''  在这种情况下传给服务器的参数为：pageSize,pageNumberqueryParams: 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

转载于:https://www.cnblogs.com/seanjack/p/7457280.html

bootstrap table 服务端分页相关推荐

bootstrap table 服务端分页
bootstrap table分页功能分为前端分页和服务端分页两种,前端分页是一次性把数据全部查询到前端,再在前端页面进行分页,当数据量较少时可以使用前端分页,但当数据量较大时,前端分页就不太适用了, ...
bootstrap pagewrapper_BootStrap table服务端分页
/** * 初始化 BootStrap Table 的封装 * * 约定:toolbar的id为 (bstableId + "Toolbar") * * @author fengs ...
BootStrap Table和Mybatis Plus实现服务端分页
一.后台java代码(Mybatis Plus分页) (1)Mybatis Plus分页的配置,在mybatis的xml文件中增加如下配置(Mybatis Plus官方文档:http://baomid ...
datatable.js 服务端分页+fixColumns列固定
前言记得还是15年的时候,工作需要,独自写后台管理系统..记得那时候,最让我头疼的不是后台逻辑,而是数据的列表展示. 列很多的时候,页面显示问题;分页样式问题;表格样式问题;数据加载...很多细节的 ...
JQuery Datatables 服务端分页简单应用学习
背景介绍最近在一个简单小项目中碰到需要一个前端数据表格控件,在看了网上的资料后最终选择了JQuery Datatables.Datatables功能及其强大,基本满足我的所有需求,在加上其插件Edi ...
bootstrap-table+Django: 服务端分页
分页方式: bootstrap-table提供两种分页方式,client和server,即客户端和服务端分页: 特点: client端分页:后台返回所有数据,前台翻页时不再请求后台. server端分 ...
bootstrap table使用服务端分页
前端代码 // 初始化表格 function initTable() {var $table = $('#table');$table.bootstrapTable('destroy');$table ...
项目实战之服务端分页的实现——SQL
服务端的分页就一个SQL语句就可以搞定,贴出代码后自己慢慢欣赏: CREATE Procedure AppGetEmpList @EID int, @LGID int, @pagesize int, ...
Jquery DataTable服务端分页的最佳实现
2019独角兽企业重金招聘Python工程师标准>>> index.html <!DOCTYPE html> <html> <head><t ...

bootstrap table 服务端分页

分页问题汇总

参考文章

表格参数

二、筛选条件后的table数据也是进行了分页处理，但是点击第二页时，筛选条件并未传入后端

bootstrap table 服务端分页相关推荐

最新文章

热门文章