在要求分页的程序中,我们一般会知道如下几个数据的参数:
总记录数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} |