html ajax分页,使用jQuery和Ajax请求实现分页效果

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

总记录数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;  }