简单易用兼容好的分页(1)

开始用到分页的时候用了一个分页插件,后来在开发环境中总是出问题,页面布局样式出问题,记得以前看视频自学的时候就听到一个老师说过他们的分页也是自己做的,分页插件也用过,但是出问题,当时没注意,现在才意识到,废话不多说,代码:


html:

<div id="page"></div>


样式:

#page{
	font-size: 14px;
	clear: both;
	padding-top: 1.45em;
	white-space: nowrap;
}
#page a{
	background: white;
	border: 1px solid #E7ECF0;
	display: inline-block;
	height: 22px;
	line-height: 22px;
	margin-right: 5px;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	width: 23px;
}
#pagePre,#pageNext{

}
.pageCurrent{
	font-weight: bold;
}



// 分页js

function paginate(){
		
		var $pageDiv = $("#page");
		
		actionName = actionName + "?pageSize="+pageSize;
		
		
		if(typeof otherParam != 'undefined' && otherParam != ""){
			actionName = actionName  + otherParam;
		}
		//上一页
		if(pageNo > 1){
			var hf = actionName + "&pageNo="+(pageNo-1);
			$pageDiv.append("<a href='"+hf+"' style='width: 65px;'>"+"上一页"+"</a>");
		};
		
		if(pageCount <= pageSize){
			for(var i=0; i < pageCount; i++){
				var hf = actionName + "&pageNo="+(i+1);
				if(pageNo == (i+1)){//当前页
					$pageDiv.append("<a href='"+hf+"' class='pageCurrent'>"+pageNo+"</a>");
				}else{
					$pageDiv.append("<a href='"+hf+"'>"+(i+1)+"</a>");
				};
			};
		}else{
			for(var i=0; i < pageSize; i++){
				var midIndex = 0;
				if(pageSize%2 == 0){
					midIndex = pageSize/2 - 1;
				}else{
					midIndex = pageSize/2;
				}
				var num = -midIndex;
				var showPageNum = pageNo+i+num;
				
				
				if(showPageNum > 0 && showPageNum <= pageCount){
					
					var hf = actionName + "&pageNo="+showPageNum;
					if(pageNo == showPageNum){//当前页
						$pageDiv.append("<a href='"+hf+"' class='pageCurrent'>"+showPageNum+"</a>");
					}else{
						$pageDiv.append("<a href='"+hf+"'>"+showPageNum+"</a>");
					};
				};
			};
		}
		
		//下一页
		if(pageNo < pageCount){
			var hf = actionName + "&pageNo="+(pageNo+1);
			$pageDiv.append("<a href='"+hf+"' style='width: 65px;'>"+"下一页"+"</a>");
		};
	};

用法示例:

var total = 310;
var pageNo = 1;
var pageCount = 31;//共有多少页
var pageSize = 10;
var actionName = "list.action";
var otherParam = "&name='www'&order='time'";
$(function(){
paginate();//分页}
);

效果:




问题:








  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
水利改革发展 中国政府高度重视水利建设,将水利作为国家基础设施建设的优先领域。政策文件强调了防洪抗旱、水资源管理、水环境保护和水生态修复等方面的全面要求,推动了水利信息化的发展。 智慧水利建设目标 智慧水利的建设目标是通过数据共享、应用惠民、应急预警等手段,打破信息孤岛,提升应急抢险协作能力,加强水利数据在惠民信息化方面的应用。同时,提出了共享联动化、解决信息安全问题、提高水利信息科技创新能力等目标。 智慧水利建设模式 智慧水利的建设模式包括构建统一平台、数据中心、信息整合平台、决策支持系统等,以实现水利、海洋、环保等政府部门和公众的信息共享和服务。此外,还包括了云计算虚拟化、网络传输、采集工程等多个方面的技术应用。 智慧水利应用实例 智慧水利的应用实例包括视频水文工程监控、多要素一体化检测设备、汛情预警智能联动、三防决策指挥、河长综合信息展示等。这些应用通过集成GIS、互联网地图服务、物联网设备等技术,实现了对水利设施的实时监控、数据分析和应急响应。 成功案例与展望 智慧水利的成功案例展示了通过视频监控、预警信息发布、移动办公信息APP等技术,有效提升了灾害应对能力、水资源管理和河长制的实施效果。这些案例表明,智慧水利的建设不仅提高了水利管理的效率和水平,也为未来的水利信息化发展提供了方向。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值