bootstraptable 前后端分页

---

一.前端分页

1.js部分

function queryList(){
	$("#tableList").bootstrapTable('destroy');
	$("#tableList").bootstrapTable({
	            url: queryUrl,                      //请求后台的URL（*）
                method: 'GET',                      //请求方式（*）
                //toolbar: '#toolbar',              //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                sortable: true,                     //是否启用排序
                sortOrder: "asc",                   //排序方式
                sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
                pageSize: 10,                       //每页的记录行数（*）
                pageList: [5, 10, 15, 20, 30],      //可供选择的每页的行数（*）
                search: false,                      //是否显示表格搜索
                strictSearch: true,                 //严格搜索
                showColumns: true,                  //是否显示所有的列（选择显示的列）
                showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
                showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,                  //是否显示父子表
                locale: "zh-CN",                    //中文设置
                //得到查询的参数
                queryParams : function (params) {
			        var queryParams = {   
                        pageSize: params.limit,                         //页面大小
                        pageNumber: (params.offset / params.limit) + 1,   //页码
                        sort: params.sort,      //排序列名  
                        sortOrder: params.order //排位命令（desc，asc） 
                    };
                    return queryParams;
                },
	           columns : [ {
	                title : 'id',
	                field : 'id',
	                sortable : true,
	                align : 'center',
	                formatter: function (value, row,index) {
						return (index + 1);
						/*formatter 属于列参数，表示对于当前列的数据进行格式化操作，
						它是一个函数，有三个参数，
						分别是value，row,indexvalue：
						表示当前单元格中的值
						row：表示当前行
						index：表示当前行的下标
						可以使用return返回想要的数据显示在单元格中*/
					}
	            }, {
	                title : '姓名',
	                field : 'name',
	                sortable : true,
	                 align : 'center'
	            }, {
	                title : '年龄',
	                field : 'age',
	                sortable : true,
	                 align : 'center'
	            },{
	                title : '性别',
	                field : 'sex',
	                sortable : true,
	                 align : 'center'
	            }],
	            onLoadSuccess: function () {    //成功后的操作
            	},
            	onLoadError: function () {     //失败后的操作
                alert("数据加载失败！");
            	}
	    })
}

2.后端dao层直接查询所有 此处略************

*二.后端分页

1.js部分

function queryList(){
	var num = 1;
	var size = 10;
	$("#tableList").bootstrapTable('destroy');
	$("#tableList").bootstrapTable({
	            url: queryUrl,                      //请求后台的URL（*）
                method: 'GET',                      //请求方式（*）
                //toolbar: '#toolbar',              //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                sortable: true,                     //是否启用排序
                sortOrder: "asc",                   //排序方式
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
                pageSize: 10,                       //每页的记录行数（*）
                pageList: [5, 10, 15, 20, 30],      //可供选择的每页的行数（*）
                search: false,                      //是否显示表格搜索
                strictSearch: true,                 //严格搜索
                showColumns: true,                  //是否显示所有的列（选择显示的列）
                showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
                showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,                  //是否显示父子表
                locale: "zh-CN",                    //中文设置
                //得到查询的参数
                queryParams : function (params) {
               		num = this.pageNumber;
               		size = this.pageSize;
                    var queryParams = {   
                        pageSize: this.pageSize,
                        pageNumber: this.pageNumber,
                        sort: params.sort,      //排序列名  
                        sortOrder: params.order //排位命令（desc，asc） 
                        id : 略,
                        name: 略,
                        age :  略,
                        sex :  略 
                    };
                    return queryParams;
                },
	           columns : [ {
	                title : 'id',
	                field : 'id',
	                sortable : true,
	                align : 'center',
	                formatter: function (value, row,index) {
						return ( (num - 1 ) *  size + index + 1);
						/*formatter 属于列参数，表示对于当前列的数据进行格式化操作，
						它是一个函数，有三个参数，
						分别是value，row,indexvalue：
						表示当前单元格中的值
						row：表示当前行
						index：表示当前行的下标
						可以使用return返回想要的数据显示在单元格中*/
					}
	            }, {
	                title : '姓名',
	                field : 'name',
	                sortable : true,
	                 align : 'center'
	            }, {
	                title : '年龄',
	                field : 'age',
	                sortable : true,
	                 align : 'center'
	            },{
	                title : '性别',
	                field : 'sex',
	                sortable : true,
	                 align : 'center'
	            }],
	            onLoadSuccess: function () {    //成功后的操作
            	},
            	onLoadError: function () {     //失败后的操作
                alert("数据加载失败！");
            	}
	    })
}

2.Mybatis语句

<select id="getUserList" resultType="com.debo.common.User">
	SELECT * 
	FROM
	(
	SELECT ROW_.*,ROWNUM ROWNUM_ FROM
	( 
	SELECT ID,NAME,AGE,SEX,RQ FROM user WHERE 1 = 1
	<if test="name!=null and name !=''">
		AND name LIKE CONCAT('%',#{name},'%')   //模糊查询
	</if>
	<if test="id!=null and id!=''">
		AND id= #{id}
	</if>
	<if rq="id!=null and rq!=''">
		AND RQ <= TO_DATE(#{rq},'yyyy-MM-dd')
	</if>
	<if rq="id!=null and rq!=''">
		AND RQ >= TO_DATE(#{rq},'yyyy-MM-dd')
	</if>
	)ROW_
	WHERE ROWNUM < #{pageEnd}
	)WHERE ROWNUM_ >= #{pageBegin}
</select>
//其中row_.*代表user表的所有列，rownum rownum_是把行序列号作为查询的伪列
//另外：rowid 与 rownum 虽都被称为伪列，但它们的存在方式是不一样的，rowid 可以说是物理存在的，表示记录在表空间中的唯一位置ID，在DB中唯一。只要记录没被搬动过，rowid是不变的。rowid 相对于表来说又像表中的一般列，所以以 rowid 为条件就不会有 rownum那些情况发生。
//另外还要注意：rownum不能以任何基表的名称作为前缀。
<select id="getTatlo" resultType="java.lang.Integer">
     select count(1) from user
</select>

**3.dao层
此处略-------------------
4.service层
得到前端参数 pageNumber 以及 pageSize
Integer pageBegin = (pageNumber - 1) * pageSize + 1;
Integer pageEnd = pageBegin + pageEnd;
然后调用 dao层的两个方法,就实现了后端的分页处理.

新手一枚,在成长的道路不断踩坑,如有不妥,欢迎指出!
生活不易,但也要长存理想!