在要求分页的程序中,我们一般会知道如下几个数据的参数:

总记录数count

每一页要显示的记录数:size

当前页:num

总页数我们可以通过count和size得到,在JS中可以使用Math.ceil()

编写我们的JS分页脚本page.js  //定义一个Page函数,接收两个参数,总记录数和参数列表
var Page = function(count,params){  	this.size=10;//初始化每一页显示10条数据  	this.num=1;//当前页为第一页  	this.count=count;  	this.url;//定义一个url  	this.cacheKey=Math.random();//定义一个随机数,保证在ajax传输的时候唯一地址,防止缓存提交  	this.sumNum = function(){//得到总页数  		return Math.ceil(this.count/this.size);  	};  	this.params = {};//定义一个参数列表  	this.first=function(){//首页  		this.show(1);  	}  	this.last=function(){//最后一页  		this.show(this.sumNum());  	}  	this.next=function() {//下一页  		this.show(this.num + 1);  	}  	this.prev=function() {//上一页  		this.show(this.num - 1);  	}  	this.show=function(num) {//处理页面函数  		if(num>0&&num<=this.sumNum()){  			this.num = num;                          //构造页面地址参数                          var args = {'pager.offset':(this.num-1)*this.size,'page.size':this.size,'_temp':this.cacheKey};  			for(p in this.params){  				args[p] = this.params[p];  			}  			$.get(this.url,args,function(data){  				showJson(data);//将异步请求的json数据显示出来  			});  			delete args;  		}  	}  	this.reload=function(){//重新加载  		this.clearCahce();//清除缓存  		if(num>0&&num<=this.sumNum()){  			this.show(this.num);  		}else{  			this.show(1);  		}  	}  	this.clearCahce=function(){  		this.cacheKey=Math.random();//改变key的值  	}  	this.bindForm=function(id){//绑定到表单中中  		$(function(){  			$('#'+id+' input[type=text]').each(function(i,input){  				if($(input).val()!=''){  					page.params[$(input).attr('name')] = $(input).val();  				}  			});  			$('#'+id+' input:checked').each(function(i,input){  				if($(input).val()!=''){  					page.params[$(input).attr('name')] = $(input).val();  				}  			});  			$('#'+id+' select').each(function(i,s){  				if($(s).find('option:selected').val()!=''){  					page.params[$(s).attr('name')] = $(s).find('option:selected').val();  				}  			});  			$('#'+id).bind('submit',function(f){  				for(var i=0;i
要在前台页面做显示,我们一般是有我们定义的分页样式,例如:
 
          New Document     
编号 姓名 年龄 性别
${users.userId} ${users.userName} ${users.userAge} ${users.userSex}
当前页:
0/
0
首页
上页
下页
末页 总共
调用page.js和编写我们的脚本语句
我们在OrderAction中编写我们的ajaxDish方法
 
 
/**  	 * Ajax 获取菜谱  	 */  	public String ajaxDish() throws Exception{  		PrintWriter writer = response.getWriter();  		try{  			int resId = Integer.parseInt(request.getParameter("resId"));  			int preId = Integer.parseInt(request.getParameter("preId"));  			PageModel pageModel = null;  			if(preId==0){ //查询全部  				pageModel = restaurantDishDao.findPageModelDishes(resId);  			}else{  				pageModel = restaurantDishDao.findPageModelDishesOfPreferentialId(resId, preId);  			}  			JSONObject object = new JSONObject();  			object.accumulate("resId", resId);  			object.accumulate("preId", preId);  			object.accumulate("count", pageModel.getCount());  			object.accumulate("data", pageModel.getDatas());  			response.setContentType("text/plain");  			response.setCharacterEncoding("UTF-8");  			writer.print(object.toString());  		}catch(Exception e){  			throw e;  		}finally{  			writer.flush();  			writer.close();  		}  		return null;  	}