一.前端分页
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层的两个方法,就实现了后端的分页处理.
新手一枚,在成长的道路不断踩坑,如有不妥,欢迎指出!
生活不易,但也要长存理想!