在要求分页的程序中，我们一般会知道如下几个数据的参数：
总记录数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<form.length;i++){ if(form[i].value==''){ $(form[i]).removeAttr('name'); } } }); }); } }要在前台页面做显示，我们一般是有我们定义的分页样式，例如： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <body> <table> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> <c:forEach items="${users}" var="users"> <tr> <td>${users.userId}</td> <td>${users.userName}</td> <td>${users.userAge}</td> <td>${users.userSex}</td> </tr> </c:forEach> <table> <div class="flickr"> 当前页：<span id="currentPage">0</span>/<span id="sumPage">0</span> 页 <a href="javascript:void(0);" onclick="page.first();">首页</a> <a href="javascript:void(0);" onclick="page.prev();">上页</a> <a href="javascript:void(0);" onclick="page.next();">下页</a> <a href="javascript:void(0);" onclick="page.last();">末页</a> 总共<span id="count" style="color: red;"></span>条 </div> </body> </html> 调用page.js和编写我们的脚本语句 <script type="text/javascript" src="page.js"></script> <script type="text/javascript"> var basePath = "<%=preBasePath%>"; var page = new Page(); //初始化菜谱Page function initPage(count){ page.count = count; page.url = basePath+"orderAction!ajaxDish.do?resId="+resId+"&preId="+preId; $('#currentPage').html(page.num); $('#sumPage').html(page.sumNum()); $('#count').html(page.count); } $(function(){ initPage(${orderPageModel.count}); }); </script>我们在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; }
随时随地看视频
