[置顶] 发布一个分页条js实现... 很好用啊

最新推荐文章于 2019-10-19 00:02:34 发布

原创最新推荐文章于 2019-10-19 00:02:34 发布 · 355 阅读

0 ·

CC 4.0 BY-SA版权

php 专栏收录该内容

158 篇文章

订阅专栏

本文介绍了一个简单的分页组件实现方法，该组件通过JavaScript函数生成页面导航链接，支持前后页跳转及页码显示等功能。

function renderPaging(url,curPage,totalPage)


{


	var pageBarNum = 5;


	var pageStr = '';


	


	var gurl = function(num){


		return url.replace('-page-',num);


	};





	curPage = parseInt(curPage);


	totalPage = parseInt(totalPage);


	


	if(curPage > 1){


		pageStr += '<span class="grey-12">&lt;&lt;&nbsp;<a class="paging-per" href="' + gurl(curPage-1) + '">上一页</a>&nbsp;</span>';


	}	


	


	var index = Math.floor(pageBarNum/2);


	var start = (curPage-index)>0 ? (curPage-index) : 1;


	var end = curPage + (pageBarNum-index);


	end = end<pageBarNum ? pageBarNum : end;


	


	if(start > 1){


		pageStr += '<span class="grey-12">&nbsp;<a class="paging-per" href="' + gurl(1) + '">1</a>&nbsp;</span>';


	}


	


	if(start > 2){pageStr += '<span class="grey-12">&nbsp;...&nbsp;</span>';}


	


	for(var i=start; i<end; i++){


		if(i>totalPage) break;


		if(i == curPage){


			pageStr += '<span class="blue-12-bold">&nbsp;<a class="paging-per paging-current" href="' + gurl(i) + '">' + i + '</a>&nbsp;</span>';


		}else{


			pageStr += '<span class="grey-12">&nbsp;<a class="paging-per" href="' + gurl(i) + '">' + i + '</a>&nbsp;</span>';	


		}


	}


	


	if(end < totalPage){


		pageStr += '<span class="grey-12">&nbsp;...&nbsp;</span>';


		pageStr += '<span class="grey-12">&nbsp;<a class="paging-per" href="' + gurl(totalPage) + '">' + totalPage + '</a>&nbsp;</span>';


	}


	


	if(curPage < totalPage){


		pageStr += '<span class="grey-12">&nbsp;<a class="paging-per" href="' + gurl(curPage+1) + '">下一页</a>&nbsp;&gt;&gt;</span>';


	}


	


	return pageStr;


}

后端只需要传入 3个参数即可

$pager = array(
    		'pagecount' => ceil($counter / $numPerPage),
    		'url' => 'url.php/page/-page-'
    		'page' => $cur_page,
    	);
    	
$this->_view['pager'] = $pager;

demo:

<p id="pageBar" page="<?php echo $pager['page'];?>" pagecount="<?php echo $pager['pagecount'];?>" url="<?php echo $pager['url'];?>"></p>

RegExp.zip (4.1 KB)
下载次数: 285

[置顶] 发布一个 分页条js实现... 很好用啊

[置顶] 发布一个分页条js实现... 很好用啊