Springmvc+mybatis+mysql+ajax实现分页

分页是web应用中最常见的需求，以下是一个完整的分页流程。

1.html页面内容：为分页留一个区域，例如：

    

<!-- 页码 -->
            <div id="page_list" class="page_list clearfix">
            	<p class="page" id="page">
            	<!-- 动态显示页码内容 -->
                </p>
            </div>

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(
										"<div style='text-align:center;'><h1>抱歉，您要找的题库不存在<h1><div>");
						$("#page_list").html("");
						return;
					}
					for ( var i = 0; i < courses.length; i++) {
						$(".ques_class_list")
								.append(
										"<li>"
												+ "<div class='ques_class_title'><span class='R'>最后编辑于 "
												+ (Math
														.round((new Date - courses[i].updateDate) / 1000 / 60 / 60))
												+ "小时 前</span><a href='custom/addQuestion.jsp?courseId="
												+ courses[i].courseId
												+ "'>"
												+ courses[i].courseName
												+ "</a></div>"
												+ "<div class='ques_class_num clearfix'>"
												+ "	<span class='class_all'>总题目<i>"
												+ courses[i].totalQuesNum
												+ "</i>道</span>"
												+ "	<span class='class_radio'>单选题<i>"
												+ courses[i].singleSelQuesNum
												+ "</i>道</span>"
												+ "	<span class='class_check'>多选题<i>"
												+ courses[i].multiSelQuesNum
												+ "</i>道</span>"
												+ "	<span class='class_blank'>填空题<i>"
												+ courses[i].fillQuesNum
												+ "</i>道</span>"
												+ "	<span class='class_program'>编程题<i>"
												+ courses[i].programQuesNum
												+ "</i>道</span>"
												+ "	<span class='class_question'>问答题<i>"
												+ courses[i].shortAnswerQuesNum
												+ "</i>道</span>"
												+ "	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
												+ "	<a href='javascript:;' οnclick='deleteOne("
												+ courses[i].courseId
												+ ");'>删除</a>"
												+ "</div>"
												+ "</li>");
					}
					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 += "<span class='prev' style='cursor:pointer'>&nbsp;</span>";
	} else {
		pageHtml += "<span class='prev' style='cursor:pointer' οnclick='changePage("
				+ (pageNum - 1) + ")'>&nbsp;</span>"
	}
	//根据总页数确定页码数组
	if (totalPage <= 10) {
		//循环出html
		for ( var i = 1; i <= totalPage; i++) {
			//判断是否当前页
			if (pageNum == i) {
				pageHtml = pageHtml + "<span class='cur'>" + i + "</span>"
			} else {
				pageHtml = pageHtml + "<span οnclick='changePage(" + i + ")' >"
						+ i + "</span>"
			}
		}
		//如果当前页码小于10
	} else {
		//判断当前
		if (pageNum <= 4) {
			//循环出html
			for ( var i = 1; i <= 10; i++) {
				//判断是否当前页
				if (pageNum == i) {
					pageHtml = pageHtml + "<span class='cur'>" + i + "</span>"
				} else {
					pageHtml = pageHtml + "<span οnclick='changePage(" + i
							+ ")'>" + i + "</span>"
				}
			}
			pageHtml = pageHtml + "<span>&nbsp;...</span>"
			//如果当前页接近总页码
		} else if (totalPage - pageNum <= 4) {
			pageHtml = pageHtml + "<span οnclick='changePage(" + 1 + ")'>" + 1
					+ "</span>";
			pageHtml = pageHtml + "<span>&nbsp;...</span>"
			//获取两者的差值
			var sub = totalPage - pageNum;
			//往前循环
			for ( var i = pageNum - (8 - sub); i <= pageNum; i++) {
				if (pageNum == i) {
					pageHtml = pageHtml + "<span class='cur'>" + i + "</span>"
				} else {
					pageHtml = pageHtml + "<span οnclick='changePage(" + i
							+ ")'>" + i + "</span>"
				}
			}
			//往后循环
			for ( var i = pageNum + 1; i <= totalPage; i++) {
				pageHtml = pageHtml + "<span οnclick='changePage(" + i + ")'>"
						+ i + "</span>"
			}
		} else {
			pageHtml = pageHtml + "<span οnclick='changePage(" + 1 + ")'>" + 1
					+ "</span>";
			pageHtml = pageHtml + "<span>&nbsp;...</span>"
			//往前循环
			for ( var i = pageNum - 4; i < pageNum; i++) {
				if (i == 1) {
					continue;
				}
				pageHtml = pageHtml + "<span οnclick='changePage(" + i + ")'>"
						+ i + "</span>"
			}
			//当前页
			pageHtml = pageHtml + "<span class='cur'>" + pageNum + "</span>"
			//往后循环
			for ( var i = pageNum + 1; i <= pageNum + 4; i++) {
				pageHtml = pageHtml + "<span οnclick='changePage(" + i + ")'>"
						+ i + "</span>"
			}
		}
	}
	// 下一页
	if (pageNum == totalPage) {
		pageHtml += "<span class='next' style='cursor:pointer'>&nbsp;</span>"
	} else {
		pageHtml += "<span class='next' style='cursor:pointer' οnclick='changePage("
				+ (pageNum + 1) + ")'>&nbsp;</span>"
	}
	$("#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<Object> objects = new ArrayList<Object>();

	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<Object> getObjects() {
		return objects;
	}

	public void setObjects(List<Object> objects) {
		this.objects = objects;
	}

	@Override
	public String toString() {
		return "PageMsg [objects=" + objects + ", pageNum=" + pageNum
				+ ", pageSize=" + pageSize + ", totalPage=" + totalPage + "]";
	}

}

4.最后是mapper里的内容：

<!-- 分页查询题库 -->

<select id="findAllCourseByPage" parameterType="map"

resultType="com.tarena.tots.entity.Course">

select * from course

<where>

<if test="courseName != null and courseName != ''">

courseName = #{courseName}

</if>

and userId = #{userId} and isDel = 0

</where>

limit #{pageMsg.begin},#{pageMsg.pageSize}

</select>

如此便是一个完整的分页流程了。

转载于:https://blog.51cto.com/fengcl/1704237