分页是web应用中最常见的需求，以下是一个完整的分页流程。
1.html页面内容：为分页留一个区域，例如：
2.js代码：代码中的courseName，loadCourseByPage，addCourse，deleteCourse等内容都是项目中逻辑，可以不用理会。
var pageNum = 1; //默认为第一页
var courseName = ""; //项目中的变量，可以忽视
//页面载入即加载第一页数据
$(function() {
loadCourseByPage(1, courseName);
});
//根据页码加载内容
function loadCourseByPage(page, courseName) {
$
.ajax( {
url : path + "customCourse/course",
type : "POST",
data : {
"pageNum" : page,
"courseName" : courseName
},
success : function(data) {
var pageMsg = data.pageMsg;
var courses = data.courses;
$(".ques_class_list").empty(); //清除原有的数据
$(".page").empty();
if (courses.length == 0 || courses == null) {
$(".ques_class_list")
.html(
"抱歉，您要找的题库不存在");
$("#page_list").html("");
return;
}
for ( var i = 0; i < courses.length; i++) {
$(".ques_class_list")
.append(
"
"
+ "最后编辑于 "
+ (Math
.round((new Date - courses[i].updateDate) / 1000 / 60 / 60))
+ "小时 前"
+ courses[i].courseName
+ " "
+ " 总题目"
+ courses[i].totalQuesNum
+ " 道"
+ " 单选题"
+ courses[i].singleSelQuesNum
+ " 道"
+ " 多选题"
+ courses[i].multiSelQuesNum
+ " 道"
+ " 填空题"
+ courses[i].fillQuesNum
+ " 道"
+ " 编程题"
+ courses[i].programQuesNum
+ " 道"
+ " 问答题"
+ courses[i].shortAnswerQuesNum
+ " 道"
+ " "
+ " 删除"
+ " "
+ "");
}
var pageHtml = ""; //页码的html
var totalPage = pageMsg.totalPage;
var pageNum = pageMsg.pageNum;
loadPage(totalPage, pageNum); //加载页码信息
$("#loadingImg").css("display", "none");
},
error : function(xhr) {
alert("动态页有问题");
}
})
}
function loadPage(totalPage, pageNum) {
var pageHtml = "";
// 上一页
if (pageNum == 1) {
pageHtml += "
";
} else {
pageHtml += " "
}
//根据总页数确定页码数组
if (totalPage <= 10) {
//循环出html
for ( var i = 1; i <= totalPage; i++) {
//判断是否当前页
if (pageNum == i) {
pageHtml = pageHtml + "" + i + ""
} else {
pageHtml = pageHtml + ""
+ i + ""
}
}
//如果当前页码小于10
} else {
//判断当前
if (pageNum <= 4) {
//循环出html
for ( var i = 1; i <= 10; i++) {
//判断是否当前页
if (pageNum == i) {
pageHtml = pageHtml + "" + i + ""
} else {
pageHtml = pageHtml + "" + i + ""
}
}
pageHtml = pageHtml + " ... "
//如果当前页接近总页码
} else if (totalPage - pageNum <= 4) {
pageHtml = pageHtml + "" + 1
+ "";
pageHtml = pageHtml + " ... "
//获取两者的差值
var sub = totalPage - pageNum;
//往前循环
for ( var i = pageNum - (8 - sub); i <= pageNum; i++) {
if (pageNum == i) {
pageHtml = pageHtml + "" + i + ""
} else {
pageHtml = pageHtml + "" + i + ""
}
}
//往后循环
for ( var i = pageNum + 1; i <= totalPage; i++) {
pageHtml = pageHtml + ""
+ i + ""
}
} else {
pageHtml = pageHtml + "" + 1
+ "";
pageHtml = pageHtml + " ... "
//往前循环
for ( var i = pageNum - 4; i < pageNum; i++) {
if (i == 1) {
continue;
}
pageHtml = pageHtml + ""
+ i + ""
}
//当前页
pageHtml = pageHtml + "" + pageNum + ""
//往后循环
for ( var i = pageNum + 1; i <= pageNum + 4; i++) {
pageHtml = pageHtml + ""
+ i + ""
}
}
}
// 下一页
if (pageNum == totalPage) {
pageHtml += " "
} else {
pageHtml += " "
}
$("#page").html(pageHtml);
}
//换页
function changePage(page) {
courseName = $("#courseName").val();
loadCourseByPage(page, courseName);
}
//增加一个题库
function addCourse() {
var courseName = $("#addCourse").val();
if (courseName == '' || courseName == null) {
alert("题库名称不能为空");
return;
}
$.ajax( {
url : path + "customCourse/addCourse",
type : "POST",
dateType : "json",
data : {
"courseName" : courseName
},
success : function(data) {
if (data == 0) {
alert("题库名重复");
} else {
alert("添加成功");
loadCourseByPage(1, "");
}
},
error : function(xhr) {
alert("动态页有问题" + xhr.responseText);
}
})
}
//查询一个题库
function findCourse() {
courseName = $("#courseName").val();
loadCourseByPage(1, courseName);
}
//删除一个题库
function deleteOne(courseId) {
if (!confirm("你确定要删除这个题库吗？删除以后就不能恢复了。")) {
return;
}
$.ajax( {
url : path + "customCourse/del",
dateType : "json",
type : "POST",
data : {
"courseId" : courseId
},
success : function(data) {
if (data > 0) {
alert("删除成功");
} else {
alert("删除失败");
}
loadCourseByPage(1, "");
},
error : function(xhr) {
alert("动态页有问题" + xhr.responseText)
}
});
}
3.java分页信息实体类：pageMsg
package com.tarena.tots.entity;
import java.util.ArrayList;
import java.util.List;
/**
* 存储分页相关的信息
*
* @author tarena
*
*/
public class PageMsg {
// 要请求的页码
private Integer pageNum = 1;
// 每页的长度
private Integer pageSize = 5;
// 总条数
private Integer totalPage;
// 对应数据的集合，此项在jsp时用不上（用model绑定），但在ajax发送异步请求时会用到
private List objects = new ArrayList();
public PageMsg() {
super();
}
public PageMsg(Integer pageNum, Integer pageSize) {
super();
this.pageNum = pageNum;
this.pageSize = pageSize;
}
public Integer getBegin() {
return (pageNum - 1) * pageSize;
}
public Integer getPageNum() {
return pageNum;
}
public void setPageNum(Integer pageNum) {
this.pageNum = pageNum;
}
public Integer getPageSize() {
return pageSize;
}
public void setPageSize(Integer pageSize) {
this.pageSize = pageSize;
}
public Integer getTotalPage() {
return totalPage;
}
public void setTotalPage(Integer totalPage) {
this.totalPage = totalPage;
}
public List getObjects() {
return objects;
}
public void setObjects(List objects) {
this.objects = objects;
}
@Override
public String toString() {
return "PageMsg [objects=" + objects + ", pageNum=" + pageNum
+ ", pageSize=" + pageSize + ", totalPage=" + totalPage + "]";
}
} 4.最后是mapper里的内容：
