分页

样式:

<div class="pageIndex">
				<div class="pageBtnBox">
					<div class="pageBtn" οnclick="pageTo(1);" id="frist"><span id="tofirst" class="icon icon_toFirstPage"></span></div>
					<div class="pageBtn" οnclick="pageTo(2);" id="prev"><span id="toprev" class="icon icon_toPrevPage" ></span></div>
					<a id="pbi1" class="pageBtn on" style="display:none;">1</a>
					<a id="pbi2" class="pageBtn" style="display:none;">2</a>
					<a id="pbi3" class="pageBtn" style="display:none;">3</a>
					<a id="pbi4" class="pageBtn" style="display:none;">4</a>
					<a id="pbi5" class="pageBtn" style="display:none;">5</a>
					<div class="pageBtn" οnclick="pageTo(3);" id="next"><span id="tonext" class="icon icon_toNextPage" ></span></div>
					<div class="pageBtn" οnclick="pageTo(4);" id="end"><span id="tolast" class="icon icon_toLastPage" ></span></div>
				</div>
				<div class="divider"></div>
				<div class="jumpToPageContainer">
					跳转到第 <input id="pageto" type="text"></input>/<label id="count2"></label>页
					<div class="jumpBtn" οnclick="pageGo();">GO</div>
				</div>
				<div class="divider"></div>
				<div class="jumpToPageContainer">
					每页显示 <input id="pageSize" type="text" οnchange="getDataInfo(1,true);" value="10"></input> 条记录
				</div>
				<div class="pageInfo">
					共<b id="countPage" class="important">0</b>页，总计<b id="count" class="important">0</b>条记录
				</div>
			</div>

JS:

1.获取数据

function getDataInfo(page,isFirst){
	var param = {};
	param["dto['qbgm020']"] = dw;
	param["dto['qbgm019']"] = serviceInfo;
	param["dto['page']"] = page;
	param["dto['isFirst']"] = isFirst;
	param["dto['pagesize']"] = $("#pageSize").val();
	param["dto['count']"] = $("#count").html();
	var obj = $("#info");
	obj.empty();
	$.ajax({
		type:"post",
		url:"bgmServiceAction2!getMyServiceList.do",
		data:param,
		dataType: "json",
		success:function(data){
			if(data.success){
				var count = parseInt(data.fieldData.count);
				var page = parseInt(data.fieldData.page);
				var pagesize = parseInt(data.fieldData.pagesize);
				var pages = Math.ceil(count/pagesize);
				var ServiceList = data.lists.ServiceList.list;
				var len = ServiceList.length;
				$("#pageto").val(page);
				$("#pageSize").val(pagesize);
				$("#countPage").html(pages);
				$("#count").html(count);
				$("#currPage").val(page);
				createPageIndex(page,pages);
				for(var i = 0;i < len;i ++){
					var html ="<tr οnclick='fnclick(this)'  id='"+ServiceList[i].bgm016+"'><td aae010='"+(ServiceList[i].aae010==null?"":ServiceList[i].aae010)+"' class='aae010'><div class='cellClient'>"+(ServiceList[i].aae010==null?"":(ServiceList[i].aae010==1?'可用':'禁用'))+"</div></td>";
					html = html + "<td ><div class='cellClient detail'>"+(ServiceList[i].bgm019==null?"":ServiceList[i].bgm019)+"</div></td>";
					html = html + "<td><div class='cellClient'>"+(ServiceList[i].bgm020_mc==null?"":ServiceList[i].bgm020_mc)+"</div></td>";
					html = html + "<td><div class='cellClient'>"+(ServiceList[i].bgm016==null?"":ServiceList[i].bgm016)+"</div></td>";
					html = html + "<td><div class='cellClient'>"+(ServiceList[i].bgm018_mc==null?"":ServiceList[i].bgm018_mc)+"</div></td>";
					html = html + "<td><div class='cellClient'>"+(ServiceList[i].aae011_mc==null?"":ServiceList[i].aae011_mc)+"</div></td>";
					html = html + "<td><div class='cellClient'>"+(ServiceList[i].aae036==null?"":ServiceList[i].aae036)+"</div></td><td class='lasttd'></td></tr>";
					obj.append(html);
				}
				obj.find("tr:odd").addClass("odd");
				$('.detail').on('mouseover',function(e){
					var obj = $(this);
					var text = obj.text();
					var abg021 = text;
					if(!abg021 || abg021 == "null")
						return;
					$('#msgDiv').html(text);
					$('#msgDiv').attr('style','width:auto;border:1px solid #CCCCCC;padding:5px;');
					if($('#msgDiv').width() > 260){
					   $('#msgDiv').width('260px');
					}else{
						$('#msgDiv').attr('style','width:auto;border:1px solid #CCCCCC;padding:5px;');
					}
					$('#msgDiv').css({
						'left' : obj.offset().left + obj.width(),
						'top'  : obj.offset().top
					});
					
					$('#msgDiv').show();
				});
				$('.detail').on('mouseout', function(e){
					$('#msgDiv').hide();
				});
			}else{
				top.Base.msgTopTip('查询失败');
				createPageIndex(1,0);
				$('#countPage').html(0);
				$('#count').html(0);
			}
		}
	});
}

2.

//创建分页条
function createPageIndex(curr,count){
	var index = 1;
	if(count == 1){
		$('#next').addClass('disabled');
		$('#end').addClass('disabled');
		$('#frist').addClass('disabled');
		$('#prev').addClass('disabled');
	}else{
		$('#next').removeClass('disabled');
		$('#end').removeClass('disabled');
		$('#frist').removeClass('disabled');
		$('#prev').removeClass('disabled');
	}
	if(curr == count){
		$('#next').addClass('disabled');
		$('#end').addClass('disabled');
	}else{
		$('#next').removeClass('disabled');
		$('#end').removeClass('disabled');
	}
	if(curr == 1){
		$('#frist').addClass('disabled');
		$('#prev').addClass('disabled');
	}else{
		$('#frist').removeClass('disabled');
		$('#prev').removeClass('disabled');
	}
	if(count < 5){
		for(var i = 1; i <= count; i++){
			$('#pbi'+index).html(i).attr('href',"javascript:getDataInfo("+i+",false)");
			if(curr == i){
				$('#pbi'+index).addClass('on');
			} else{
				$('#pbi'+index).removeClass('on');
			}
			$('#pbi'+index).css('display','');
			index++;
		}
		for(var j=index;j<=5;j++){
			$('#pbi'+j).css('display','none');
		}
	} else{
		for(var k=1;k<=5;k++){
			$('#pbi'+k).css('display','');
		}
		if(curr <= 3){
			for(var i = 1; i < 6; i++){
				$('#pbi'+index).html(i).attr('href',"javascript:getDataInfo("+i+",false)");
				if(curr == i){
					$('#pbi'+index).addClass('on');
				} else{
					$('#pbi'+index).removeClass('on');
				}
				index++;
			}
		} else if(curr > (count - 3)){
			for(var i = count - 4; i <= count; i++){
				$('#pbi'+index).html(i).attr('href',"javascript:getDataInfo("+i+",false)");
				if(curr == i){
					$('#pbi'+index).addClass('on');
				} else{
					$('#pbi'+index).removeClass('on');
				}
				index++;
			}
		} else{
			for(var i = curr - 2; i <= curr + 2; i++){
				$('#pbi'+index).html(i).attr('href',"javascript:getDataInfo("+i+",false)");
				if(curr == i){
					$('#pbi'+index).addClass('on');
				} else{
					$('#pbi'+index).removeClass('on');
				}
				index++;
			}
		}
	}
}

3.

//页面跳转，用于上一页、下一页等
function pageTo(flag){
	var curr = $('#currPage').val();
	var countPage = $('#countPage').html();
	var page = 1;
	if(flag == 1){
		page = 1;
		if(curr == 1){
			top.Base.msgTopTip("已经是第一页！");
			return;
		}
		
	} else if(flag == 2){
		if(parseInt(curr) - 1 == 0){
			top.Base.msgTopTip("已经是第一页！");
			return;
		}
		page = parseInt(curr) - 1;
	} else if(flag == 3){
		page = parseInt(curr) + 1;
		if(parseInt(curr) == countPage){
			top.Base.msgTopTip("已经是最后一页！");
			return;
		}
	} else if(flag == 4){
		page = countPage;
		if(curr == countPage){
			top.Base.msgTopTip("已经是最后一页！");
			return;
		}
	}
	getDataInfo(page,false);
}
//指定跳转页
function pageGo(){
	var page = $('#pageto').val();
	var curr = $('#currPage').val();
	var count = $('#countPage').html();
	var reg = /^[1-9]\d*$/;
	if(!reg.test(page)){
		top.Base.msgTopTip('请输入正确的页码');
		return;
	}
	if(page == curr){
		return;
	}
	if(parseInt(page) > parseInt(count)){
		top.Base.msgTopTip("没有这一页");
		return;
	}
	getDataInfo(page,false);
}