分页是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里的内容：

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

    <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>

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