码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript模仿实验室分页组件

时间:2014-09-11 17:23:02      阅读:245      评论:0      收藏:0      [点我收藏+]

标签:style   http   color   io   os   java   ar   for   数据   

原文摘自我的前端博客,欢迎大家来访问

http://hacke2.github.io

起因

刚才蔡哥让我重启一下邻水项目服务器,我顺便有回顾了一下去年做的项目。。当时我的任务是园区动态+配置管理,园区动态里有个分页 当时是拿实验室以前项目:泛教育分页组件做的,完全是拿来主义,现在看到,就像用javascript实现一下,没什么技术含量,设计思路也是 至少7年前的,直接一个a标签打开一个连接,将你的当前页数传到后台去。什么时候再做一个AJAX的。

分析

邻水分页如下图: bubuko.com,布布扣现在数据还不是很多,显示了三条,而且有首页、尾页、上页、下页等辅助按钮,当当前页为第一个时,上页和首页成不可点击状。 当当前页为最后一个时,下页和尾页成不可点击状。 还有以下规则: * 如果总页数大于10且当前页远离总页数(小于5),则显示5个,后面的省略直到最后一个; * 总页数大于10且当前页接近总页数(小于总页数-3)则显示后4个; * 除开上面两个情况,显示当前页前后2页

代码

将page传到后台去取数据,一页显示多少条也在后台弄吧,用a数组存a标签,比字符串拼接快很多,StringBuffer也是按照这个原理实现的。

function iPage(obj,count,curPage){  
		var href = ‘article.do?page=‘;
		var obj=obj;
		var count=count;
		var curPage=curPage;
		var a=[];
		//总页数少于10 全部显示,大于10 显示前3 后3 中间3 其余....
	
		if(curPage == 1) {
			a.push(‘<a href="#" class="unclick" >首页</a>‘);
			a.push(‘<a href="#" class="unclick" >上页</a>‘);
		}
		else {
			a.push(‘<a href="‘ + href + 1 + ‘" >首页</a>‘);
			a.push(‘<a href="‘ + href + (curPage-1) + ‘"  >上页</a>‘);
		}

		//总页数小于10
		if(count<=10){
			for(var i=1;i<=count;i++){
				createPage(i);
			}
		}else {
			if(curPage <= 4) {//总页数大于10且当前页远离总页数(小于5)
				for(var i = 1; i <=5; i++) {
					createPage(i);
				}
				a.push(‘...<a href="‘ + href + count + ‘">‘+count+‘</a>‘)
			}else if(curPage>=count-3){//总页数大于10且当前页接近总页数(小于总页数-3)
				a.push(‘<a href="‘ + href + 1 + ‘">1</a>‘);
				for(var i=count-4;i<=count;i++){
					createPage(i);
				}
			}else{ //除开上面两个情况
				a.push(‘<a href="‘ + href + 1 + ‘">1</a>...‘);
				for(var i=curPage-2;i<=curPage+2;i++){
					createPage(i);
				}
				a.push(‘...<a href="‘ + href + count + ‘">‘+count+‘</a>‘);
			}
		}

		if(curPage==count){
			a.push(‘<a href="#" class="unclick">下页</a>‘);
			a.push(‘<a href="#" class="unclick">尾页</a>‘);
		}
		else{
			a.push(‘<a href="‘ + href + (curPage + 1) + ‘">下页</a>‘);
			a.push(‘<a href="‘ + href + count + ‘">尾页</a>‘);
		}
		
		obj.innerHTML=a.join("");

		//生成页面
		function createPage(i){
			if(curPage==i){
				a.push(‘<a href="‘ + href + i + ‘" class="on">‘+i+‘</a>‘);
			}
			else{
				a.push(‘<a href="‘ + href + i + ‘" >‘+i+‘</a>‘);
			}
		}
	}

查看完整DEMO

bubuko.com,布布扣

end


JavaScript模仿实验室分页组件

标签:style   http   color   io   os   java   ar   for   数据   

原文地址:http://blog.csdn.net/hacke2/article/details/39207273

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!