前端分页实现

最新推荐文章于 2025-05-16 15:58:29 发布

转载最新推荐文章于 2025-05-16 15:58:29 发布 · 136 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hust/archive/2011/06/25/2090465.html

文章标签：

#前端 #javascript #ViewUI

本文介绍了一种使用纯Ajax技术实现网页数据分页的方法。通过自定义JavaScript模板引擎解析分页模板，实现了前后端分离场景下的动态分页效果。文章提供了具体的模板示例和JavaScript处理代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近做de一个项目，整个页面的数据更新要纯ajax实现，没办法，连分页都得由我来写了，基本思路还是像后台那样实现分页，后台实现分页其实也就是用后台的程序来处理那段分页的模版，于是我想

到了用js自己来解析那段类似的分页模版，正好以前自己也做了js模版引擎（http://www.cnblogs.com/hust/archive/2011/04/28/2032265.html），刚好派上用场，

下面是分页的模版：

{{if(data.totalpage>1){ }}
                {{ if(data.curpage!=1){}}
           <li><a href="javascript:void(0)" class="previous_page" onclick="Ybole.page.previous()">上一页</a></li>
          {{ } }}
          {{for(var a=parseInt((data.curpage-1)/Ybole.page.perpage)*Ybole.page.perpage,i=a+1;i<=Math.min(a+Ybole.page.perpage,data.totalpage);i++){}}
         <li>
         <a href="javascript:void(0)" onclick="Ybole.page.goto({{=i}})" {{ if(data.curpage==i){}} class="hover" {{ } }}>{{=i}}</a>
         </li>
          {{ } }}
         {{ if(Math.ceil(data.totalpage/Ybole.page.perpage)!= Math.ceil(data.curpage/Ybole.page.perpage)){ }}
        <li>
         <a href="javascript:void(0)" class="nopage">...</a>
         </li>
         {{ } }}
         {{ if(data.curpage!=data.totalpage){ }}
        <li ><a href="javascript:void(0)" class="next_page" onclick="Ybole.page.next()">下一页</a></li>
         {{ } }}
        {{   } }}

一下是模版处理代码

var pageTpl=Template({
            tpl:$('#pagetpl')[0].text,
         data:{curpage:1,totalpage:1}
         });

Ybole.page={
					   	curpage:1,
						totalpage:1,
						perpage:10,//每页显示的条数
						previous:function(){
						  this.goto(--this.curpage);
						},
						next:function(){
						  this.goto(++this.curpage);
						},
						goto:function(n){
						  this.curpage=n;
						  dosomething();

						  $('#page').html(pageTpl.render({curpage:n}));
						}
				    }

转载于:https://www.cnblogs.com/hust/archive/2011/06/25/2090465.html