springMVC+JSP+jQuery做分页查询示例

单独做一个分页JSP，代码如下：

<%@ page  contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
	<span id="pageId">
		<a class="first">首页</a>
		<a class="pre">上一页</a>&nbsp;
		<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 &lt;= #{endIndex}
	)
	where RN &gt; #{startIndex}
	</select>
	
	<select id="getRowCount" resultType="int">
	  select count(*)
	  from supplier
	</select>

代码简单易懂适合新手学习，可以根据自己需求以做改动。

springMVC+JSP+jQuery做分页查询示例

猜你喜欢