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

本文深入探讨了如何使用JavaScript实现动态分页功能,包括页面跳转逻辑、分页导航条生成及样式处理。

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

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>
  
 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值