java+mysql+jquey实现分页功能

一：关键思想

1：后台采用mysql的limit进行分页查询

2：实现效果如下图，效果是确定显示5页，如果后台传递过来的总页数大于5页，则初始显示5页，当点击下一页或者2,3,4,5页是要动态修改页码2,3,4,5,6的样式；如果后台传递过来的页码小于5页且大于1页则直接将所有的页数显示出来；如果传递过来只有一页则不显示分页。

  

算法：1,2,3,4,5

（1）页码最多显示5页，当前页，在页码列表中的位置定位3.

（2）根据当前页来定开始页码和结尾页码。动态改变则需要三个变量，第一个是当前页码pc,开始页码为begin,结束页码end.'

如总页数为7页。当页码列表是2，3,（4），5，6可知4为当前页，则开始也是2，尾页是6可得出公式begin=pc-2,end=pc+2;但是这个公式会出现头溢出和尾溢出的错误，当pc =1时，begin=1-2=-1,显然是错误的，这时只需要判断当begin<1时，bengin=1,end=5;当pc=6时，end = 6+2=8大于7，则表示尾溢出，这时只需要将end=record(总页数),begin= record-4.

如果总页数少于5页，只需要将这些页码都显示出来，则begin=1 ,end= record;

二：后台分页查询代码

1、建立一个pageBean类，代码如下

package cn.zzu.common;

import java.util.List;

public class pageBean<T> {

	private int pc;//当前页面 page code
//	private int tp;//总页数 total page,这条记录应该是计算得到不能有外界设置
	private int tr;//总记录数 total record
	private int ps;//每页显示的条数page size
	private List<T> beanList;//当前页的数据记录，由于这个是公共类所以使用泛类型list<t>
	public int getPc() {
		return pc;
	}
	public void setPc(int pc) {
		this.pc = pc;
	}
	/**
	 * 说明：计算总页数，通过总记录数和每页显示数来计算总页数。
	 * 时间：2017-1-13
	 * 作者：梁园
	 * @return
	 */
	public int getTp() {
		int tp = tr/ps;
		return tr%ps==0?tp:tp+1;//如果有101条数据，每页显示10条，则应该返回11页而不是10页
	}
//	public void setTp(int tp) {
//		this.tp = tp;
//	}
	public int getTr() {
		return tr;
	}
	public void setTr(int tr) {
		this.tr = tr;
	}
	public int getPs() {
		return ps;
	}
	public void setPs(int ps) {
		this.ps = ps;
	}
	public List<T> getBeanList() {
		return beanList;
	}
	public void setBeanList(List<T> beanList) {
		this.beanList = beanList;
	}
}

2、servlet建立查询的分页函数

	public void queryloginHistory(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		//获得查询参数
		String callback = request.getParameter("callback"); 
		String account = request.getParameter("account");
		//获取请求的当前页 对于分页请求的参数是固定的可以封装一个方法。
		String pageCode = request.getParameter("pageCode");
		//获得每页显示的条目
		String pageSize = request.getParameter("pageSize");
		
	    /*
	     *由于json传递过来的数据是字符串需要转化成int型,
	     */
		int pc = Integer.parseInt(pageCode);
		int ps = Integer.parseInt(pageSize);
		//将账号、当前页和每页显示的数据传递给业务层
		pageBean<LoginHIstory> pb = userService.queryloginHistory(account,pc,ps);
		//将list转化成数组
		JSONArray rows = JSONArray.fromObject(pb.getBeanList());
		//建立json对象
		JSONObject  json = new JSONObject();
		json.put("success", true);
		json.put("msg", "查询成功");
		json.put("record", pb.getTp());
		json.element("rows", rows);
		//将json数据转化成jsonp响应给客户端
		com.postToWebData(response, callback, json);
		
	}

3、业务层函数

	public pageBean<LoginHIstory> queryloginHistory(String account, int pc, int ps) {
		return userDao.queryloginHistory(account,pc,ps);
	}

4、数据层函数

	public pageBean<LoginHIstory> queryloginHistory(String account, int pc, int ps) {
		try {
			//创建pageBean对象
			pageBean<LoginHIstory> pb = new pageBean<LoginHIstory>();
			//设置当前页和每页显示的数量
			pb.setPc(pc);
			pb.setPs(ps);
			//查询总记录数
		    String sql ="select count(*) from loginHistory where account = ? ORDER BY time DESC ";
			Number num = (Number) qr.query(sql, new ScalarHandler(), account);
			//设置总记录数
			pb.setTr(num.intValue());
			//查询数据
			sql = "select * from loginHistory where account = ? ORDER BY time DESC limit ?,?";
			Object[] params = {account,(pc-1)*ps,ps};
			List<LoginHIstory> beanList = qr.query(sql, new BeanListHandler<LoginHIstory>(LoginHIstory.class), params);
			//设置给pb 
			pb.setBeanList(beanList);
			//返回pb
			return pb;
		} catch (SQLException e) {
			throw new RuntimeException(e);
		} 
	}

三、前台代码

1：设置全局变量

var mPageCode=1;//当前页
	var mPageSize=2;//每页显示的
	var begin,end,record;//分别是页码列表的开始、结束以及后台传递过来的总页数

2：请求数据获得总页数和每页显示的条目

/**
	 * 说明：根据分页的当前页数和每页显示的数据请求后台的返回响应的分页数据
	 * 时间：2018-1-13
	 * @param {Object} pageCode 当前页数
	 * @param {Object} pageSize 每页显示的条目
	 */
	function getLoginHistory(pageCode,pageSize){
		var postDataRows ={"method":"queryloginHistory"};
		postDataRows.account = localStorage.getItem("account");
		postDataRows.pageCode = pageCode;//当前页
		postDataRows.pageSize = pageSize;//每页显示的条目
		var url = "Bike/UserServlet";
		postAjaxData(url,postDataRows,function(data){	
			if(data.success){
				$("#tableList").html("");
				//循环添加条目
				for(var i = 0;i<data.rows.length;i++){
					var html='<tr>' 
						    +'  <td>'+data.rows[i].time+'</td>'
						    +'  <td>'+data.rows[i].ip+'</td>'
						    +'  <td>'+data.rows[i].type+'</td> '
						    +'  <td>'+data.rows[i].platform+'</td>'
						    +'  <td>'+data.rows[i].sate+'</td>'
						    +'</tr>'
					$("#tableList").append(html);    
				}
				//将总页数设置为全局变量
				record = data.record;
				//显示页码
				showPage(data.record)
			}else{
				toast(data.msg);	
			}
		});
	}

3：显示页码列表

/**
	 * 说明：动态显示分页的的数字，首先确定页面的开始与结束，然后循环显示出来
	 * 时间：2018-1-13
	 * 作者：梁园
	 * @param {Object} record 总页数
	 */
    function showPage(record){
    	//当总页码为1时不显示页码列表
    	if(record ==1){
    		$("#page").hide();
    	}
    	//当页码大于1小于5时
    	if(record<5){
    		$("#page").show();
    		begin = mPageCode;
    		end = record;
    	}else{
    		//页码大于5
    		$("#page").show();
    		begin = mPageCode-2;
    		end = mPageCode+2;
    		//解决头溢出
    		if(begin<1){
    			begin = 1;
    			end   = 5;
    		}	
    		//解决尾溢出
    		if(end>record){
    			begin = record -4;
    			end = record;
    		}
    	}
    	/*
    	 * 显示页码
    	 * 1、将原来的页码列表清除
    	 * 2、添加上一页按钮
    	 * 3、循环显示页码列表
    	 * 4、添加下一页按钮
    	 */
    	$(".pagination").html("");
		var html = '<li ><a href="#" id="back" οnclick="change(this.id)">&laquo;</a></li>'	
		for(var i = begin;i<=end;i++){
			//如果页码==当前页时，将该页码高亮显示，否则不高亮显示
			if(i== mPageCode){
				//class="active" 按钮高亮显示
				html += '<li class="active"><a href="#"  οnclick="change('+i+')">'+i+'</a></li>'	;
			}else{
				html += '<li ><a href="#"  οnclick="change('+i+')">'+i+'</a></li>'	;
			}	
		}
		//添加下一步按钮
		html += '<li ><a href="#" id="next" οnclick="change(this.id)">&raquo;</a></li>'
		$(".pagination").append(html);
    }

4；页码按钮和上一步以及下一步的按钮的点击事件

 /**
	 * 说明：根据分页页面的数值来动态改变数据的函数，关键在于如何动态获得当前页
	 * 时间：2018-1-13
	 * 作者：梁园
	 * @param {Object} id 表示上一页和下一页的id值以及数字的数值
	 */
	function change(id){
		if(id == "next"){
			//下一步按钮
			if(mPageCode<record){
				mPageCode+=1;
				getLoginHistory(mPageCode,mPageSize);
			}
			 
		}else if(id == "back"){
			//上一步按钮
			if(mPageCode>1){
				mPageCode -=1;
			    getLoginHistory(mPageCode,mPageSize);
			}	
		}else{
			//页码按钮
			mPageCode = id;
			getLoginHistory(mPageCode,mPageSize);
		}
	}
	

四、效果图