自编写分页功能实现

分页效果如上图。
下面记录一下前端代码部分：

html部分：

<div class="iframe-tab-content">
				<table id="powerGirdId" class="table-bigscreen" cellpadding="0" cellspacing="0" >
					<thead>
						<tr>
							<th>序号</th>
							<th>站线名称</th>
							<c:if test="${tableType == 'device'}">
								<th>名称</th>
							</c:if> 
							<th>电压等级</th>
						</tr>
					</thead>
					<tbody id="powerList">
					
					</tbody>
				</table>
				<div class="iframe-tab-page">
					<a href="javascripit:void(0)" onclick="paging('first')" class="iframe-tab-first" id="conFirstIcon">首页</a>
					<a href="javascripit:void(0)" onclick="paging('last')" class="iframe-tab-prev" id="conUpIcon">上一页</a>
					<select class="iframe-tab-num" id="pageNo" onchange="paging(parseInt(this.value))"></select>
					<a href="javascripit:void(0)" onclick="paging('next')" class="iframe-tab-next" id="conDownIcon">下一页</a>
					<a href="javascripit:void(0)" onclick="paging('end')" class="iframe-tab-end" id="conEndIcon">尾页</a>
					<span id="iframe-total" class="iframe-tab-total"></span>
				</div>
			</div>

分页跳转方法：

	
	function paging(val) {
		if(!isNaN(val) && typeof val === 'number'){//初始化及点击数字跳转项
			pageNo=val;
			startNum = (pageNo -1) * pageSize;
			endNum = pageNo * pageSize;
		}	
		if(val == "first"){	//显示第一页
			if (pageNo > 1) {
				pageNo=1;
				startNum = (pageNo -1) * pageSize;
				endNum = pageNo * pageSize;
			}
		}
		if(val == "next"){	//显示下一页
			if (pageNo <= totalPage) {
				++pageNo;
				startNum = (pageNo -1) * pageSize;
				endNum = pageNo * pageSize;
			}
		}
	    if(val == "last"){	//显示上一页
	    	if (pageNo > 1) {
		   		pageNo = pageNo-1;
			    startNum = (pageNo -1) * pageSize;
			    endNum = pageNo * pageSize;
	    	}
	    }
	    if(val == "end"){	//显示尾页
	    	if (pageNo != totalPage) {
		   		pageNo = totalPage;
			    startNum = (pageNo -1) * pageSize;
			    endNum = pageNo * pageSize;
	    	}
	    }
		$.ajax({
			type : "POST",
			url : "<c:url value='/ajax'/>",
			data : {      
				service : "com.shd.biz.main.bigScreenHomePage.baseListPage.service.BaseListPageService",	           
				 method : "getPowerGridDataByTypeAndLevel",
				 params : [tableType, level, typeId, type, totalCount, startNum, endNum]
			},
			success : function(data) {
				if(typeof(data.PARAMCOUNT)!="undefined"){
			    	 totalCount = data.PARAMCOUNT.COUNT;
			    	 $("#iframe-total").text("总共"+totalCount+"条数据");
			    	 totalPage = parseInt(totalCount/pageSize);
					 if(totalCount == 0 || totalCount%pageSize != 0){
					 	   totalPage++;
					 }
						creatOption(pageNo,totalPage);//初始化给页数select标签赋值
			    }
				
				if(typeof(data)!= "undefined" && data!= null){
					var powerList="";
					var i = "";
				    var list=data.DATALIST;
					for(var index in list){
						var rn = list[index].RN;
						var stationName = list[index].STATIONNAME;
						var pw_level = list[index].PW_LEVEL;
						pw_level = pw_level.substring(0,pw_level.length-3) + "kV";
						var fullPath = list[index].FULLPATH;
						if (fullPath != 'undefined' && fullPath != null) {
							powerList += "<tr><td>" + rn + "</td><td>" + stationName + "</td><td>" + fullPath + "</td><td>" + pw_level + "</td></tr>";
						} else {
							powerList += "<tr><td>" + rn + "</td><td>" + stationName + "</td><td>" + pw_level + "</td></tr>";
						}
					}
					$("#powerList").html(powerList);//表格数据处理插入
					 if(totalPage<2){
						 $("#conFirstIcon").addClass("noclick");
						 $("#conEndIcon").addClass("noclick");
						 $("#conUpIcon").addClass("noclick");
						 $("#conDownIcon").addClass("noclick");
					 }
					 if(pageNo<totalPage){
						 $("#conEndIcon").removeClass("noclick");
						 $("#conDownIcon").removeClass("noclick");
					 }
					 if(pageNo == 1){
						 $("#conFirstIcon").addClass("noclick");
						 $("#conUpIcon").addClass("noclick");
					 }
					 if(pageNo == totalPage){
						 $("#conEndIcon").addClass("noclick");
						 $("#conDownIcon").addClass("noclick");
					 }
					 if(pageNo > 1){
						 $("#conFirstIcon").removeClass("noclick");
						 $("#conUpIcon").removeClass("noclick");
						} 
				}
			},
			dataType : "json"
	     });
	}	

页码代码部分：

function creatOption(pageNo,totalPage){
		var showPage=5;//下拉框最小展示个数
		var html="";
		if(totalPage!=0&&pageNo!=totalPage){
			if(pageNo>showPage){
				for(var i=(pageNo-showPage);i<pageNo;i++){
					html+="<option value="+i+">"+i+"</option>"
				}
			}else{
				for(var i=1;i<pageNo;i++){
					html+="<option value="+i+">"+i+"</option>"
				}
			}
			
			if(totalPage-pageNo>=showPage){
				for(var i=0;i<=showPage;i++){
					html+="<option value="+(pageNo+i)+">"+(pageNo+i)+"</option>"
				}
			}else if(totalPage-pageNo<showPage){
				for(var i=0;i<(totalPage-pageNo+1);i++){
					html+="<option value="+(pageNo+i)+">"+(pageNo+i)+"</option>"
				}
			}
		}else{
			//最大页数等于当前页数
			if(pageNo>showPage){
				for(var i=showPage;i>=0;i--){
					html+="<option value="+(pageNo-i)+">"+(pageNo-i)+"</option>"
				}
			}else{
				for(var i=1;i<=pageNo;i++){
					html+="<option value="+i+">"+i+"</option>"
				}
			}
		}
		 $("#pageNo").html(html);
		$("#pageNo").val(""+pageNo); 
		
	} 

样式省略。

后台代码省略。