单独做一个分页JSP,代码如下:
<%@ page contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<span id="pageId">
<a class="first">首页</a>
<a class="pre">上一页</a>
<a class="next">下一页</a>
<a class="last">尾页</a>
<a class="pageCount">总页数(1)</a>
<a class="pageCurrent">当前页(1)</a>
</span>
JSP页面对应的js代码:
$(document).ready(function(){
$("#pageId").on('click',
'.pre,.next,.first,.last',jumpToPage);
});
//设置分页
function setPagination(pageObject){
//1.初始化总页数
$(".pageCount").html("总页数("+pageObject.pageCount+")");
//2.初始化当前页的页码
$(".pageCurrent").html("当前页("+pageObject.pageCurrent+")");
//3.在pageId对应的对象上绑定总页数
//data函数用于以key/value的方式在对象上绑定数据
$("#pageId").data("pageCount",
pageObject.pageCount);
//4.在pageId对象的对象上绑定当前页面值
$("#pageId").data("pageCurrent",pageObject.pageCurrent);
}
//定义一个函数,通过此函数实现页面的跳转
function jumpToPage(){
//获得点击对象上class属性对应的值,根据此值
//判定具体点击的是哪个对象(例如上一页,下一页)
var clazz=$(this).attr("class");
//获得pageId对象上绑定的pageCurrent对应的值
var pageCurrent=$('#pageId').data("pageCurrent");
//获得pageId对象上绑定的pageCount对应的值
var pageCount=$('#pageId').data("pageCount")
//根据class属性的值判断点击的是否是上一页
if(clazz=='pre'&&pageCurrent>1){
pageCurrent--;
}
//判断点击的是否是下一页
if(clazz=="next"&&pageCurrent<pageCount){
pageCurrent++;
}
//判断点击的对象是否是首页
if(clazz=="first"){
pageCurrent=1;
}
//判定点击的对象是否是尾页
if(clazz=="last"){
pageCurrent=pageCount;
}
//重写绑定pageCurrent的值,
$('#pageId').data("pageCurrent",pageCurrent);
//重新执行查询操作(根据pageCurrent的值)
doGetObjects();
}
对页面做数据显示的js
/*异步(ajax)加载服务端数据*/
function doGetObjects(){
//1.定义访问项目信息的url
var url="project/doFindPageObjects.do";
//2.获取表单数据(查询时用)
var params=getQueryFormData();
//3.动态设置分页页码数据
var pageCurrent=$('#pageId').data("pageCurrent");
if(!pageCurrent)pageCurrent=1;
params.pageCurrent=pageCurrent;
//4.发起异步ajax请求{name:"",valid:"",pageCurrent:1}
$.get(url,params,function(result){//result-->JsonResult-->{}
debugger
//console.log(result);
if(result.state==1){
//设置当前页数据
setTableBodyRows(result.data.list);
//设置分页信息(setPagination方法在page.js中)
//console.log(result.pageObject);//undefined
setPagination(result.data.pageObject);
}else{
alert(result.message);
}
});
java页面对象代码如下:
package cn.tedu.ttms.common.web;
import java.io.Serializable;
/**封装具体的分页信息*/
public class PageObject implements Serializable{
private static final long serialVersionUID = -8753809986545361268L;
/**当前页*/
private int pageCurrent=1;
/**每页最多能显示的记录数*/
private int pageSize=2;
/**总记录数*/
private int rowCount;
/**上一页的最后一条记录位置
* 对应:limit startIndex,pageSize;
*/
private int startIndex;
public int getPageCurrent() {
return pageCurrent;
}
public void setPageCurrent(int pageCurrent) {
this.pageCurrent = pageCurrent;
}
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
public int getRowCount() {
return rowCount;
}
public void setRowCount(int rowCount) {
this.rowCount = rowCount;
}
/**计算总页数*/
public int getPageCount() {//pageCount
int pages = rowCount/pageSize;
if(0 != rowCount%pageSize) {
pages +=1;
}
return pages;
}
public int getStartIndex() {
return startIndex;
}
public void setStartIndex(int startIndex) {
this.startIndex = startIndex;
}
}
controller中的代码:
@RequestMapping("doFindPageObjects")
@ResponseBody
public JsonResult doFindPageObjects(
String name,
Integer valid,
Integer pageCurrent){
//state
//message
//data
Map<String,Object> map=projectService
.findPageObjects(name,valid,pageCurrent);
return new JsonResult(map);
service中的代码:
@Override
public Map<String, Object> findPageObjects(
String name,
Integer valid,
Integer pageCurrent) {
//1.验证参数的有效性
if(pageCurrent==null||pageCurrent<1)
throw new ServiceException("参数值无效,pageCurrent="+pageCurrent);
//2.获取当前页数据
//2.1 计算startIndex的值
int pageSize=2;
int startIndex=(pageCurrent-1)*pageSize;
//2.2 根据startIndex的值获取当前页数据
List<Project> list=
projectDao.findPageObjects(
name,
valid,
startIndex,
pageSize,
"createdTime");
//3.获取总记录数(根据此值计算总页数)
int rowCount=
projectDao.getRowCount(name,valid);
PageObject pageObject=new PageObject();
pageObject.setRowCount(rowCount);
pageObject.setPageSize(pageSize);
pageObject.setPageCurrent(pageCurrent);
pageObject.setStartIndex(startIndex);//可选
//4.封装查询和计算结果到map对象
//1)HashMap底层结构?(数组+链表+红黑树)-->JDK1.8
//2)HashMap是否线程安全?(不安全,多线程并发访问)
//3)HashMap是否能保证添加元素的有序性(不能,
//假如希望保证有序性可以选择LinkedHashMap)?
//4)HashMap在并发场景下如何使用?(将其转换为同步集合或者
//直接使用ConcurrentHashMap)
Map<String,Object> map=
new HashMap<String,Object>();
map.put("list", list);
map.put("pageObject",pageObject);
return map;
}
dao层:
List<Project> findPageObjects(
@Param("name")String name,
@Param("valid")Integer valid,
@Param("startIndex")int startIndex,
@Param("pageSize")int pageSize,
@Param("orderBy")String orderBy);
/**获取表中记录的总行数,我们要根据这个结果计算总页数*/
int getRowCount(
@Param("name")String name,
@Param("valid")Integer valid);
mysql中的mapper:
<select id="findPageObjects"
resultType="project">
select *
from tms_projects
<include refid="queryWhereId"/>
order by ${orderBy} desc
limit #{startIndex},#{pageSize}
</select>
<!-- resultType后的int是否可以修改为integer,
这个integer是否可以大写. -->
<select id="getRowCount"
resultType="int">
select count(*)
from tms_projects
<include refid="queryWhereId"/>
</select>
oracle中mapper:
<select id="findPage" resultType="Supplier">
select * from(
select a.*,ROWNUM RN
from(
select *
from supplier) a
where ROWNUM <= #{endIndex}
)
where RN > #{startIndex}
</select>
<select id="getRowCount" resultType="int">
select count(*)
from supplier
</select>
代码简单易懂适合新手学习,可以根据自己需求以做改动。