分页插件

先引入seach.ja文件：

var PAGE_SIZE = 7;//全局变量，当前页面加载的列表分页的每页条数
var PAGE = 1;
/**
 * 初始化分页栏
 * @param total 总数据条数
 * */
function initPageBar(total) {
    var pageNo = parseInt($(".result-panel").attr("pageNo"));//当前加载的分页号数

    var pageBarWidth = 0;//动态设置分页栏的宽度
    $("#page_bar").empty();
    var pageCount = parseInt(total/PAGE_SIZE) + (total%PAGE_SIZE==0 ? 0 : 1);//计算出总页数

    //当前分页号为0时，隐藏首页和上一页按钮
    $("#page_bar").append('<div class="jump-page-btn" style="display:'+(pageNo==1 ? 'none' : 'block')+';"><a href="javascript:void(0)" value="1">首页</a></div>');
    $("#page_bar").append('<div class="jump-page-btn" style="display:'+(pageNo==1 ? 'none' : 'block')+';"><a href="javascript:void(0)" value="previous">上一页</a></div>');
    pageBarWidth += pageNo==1 ? 0 : 90;//增加首页和上一页按钮的宽度

    for(var i=1; i<=pageCount; i++) {
        if((i>=pageNo-2 && i<=pageNo+2) || (pageNo<3 && i<6) || (pageNo>pageCount-3 && i>pageCount-6)) {
            $("#page_bar").append('<div class="page-btn '+(i==pageNo ? 'current-page-btn' : '')+'"><a href="javascript:void(0)" value="'+i+'">'+i+'</a></div>');
            pageBarWidth += 25;//每多一个按钮，分页栏宽度加1
        }
    }

    //当前分页号为最大值时，隐藏下一页按钮
    $("#page_bar").append('<div class="jump-page-btn" style="display:'+(pageNo==pageCount ? 'none' : 'block')+';"><a href="javascript:void(0)" value="next">下一页</a></div>');
    //$("#page_bar").append('<div class="jump-page-btn" style="display:'+(pageNo==pageCount-1 ? 'none' : 'block')+';"><a href="javascript:void(0)" value="'+(pageCount-1)+'">尾页</a></div>');
    pageBarWidth += pageNo==pageCount ? 0 : 60;//增加下一页按钮的宽度
    $("#page_bar").css("width", pageBarWidth);

    //监听事件
    $(".page-btn").mouseover(function() {
        $(this).css("border", "1px solid #166ABE");
    });
    $(".page-btn").mouseout(function() {
        $(this).css("border", "1px solid #A9B8D4");
    });
    $(".page-btn a").click(clickPage);
    $(".jump-page-btn a").click(clickPage);
}

/**
 * 监听分页按钮点击事件
 * */
function clickPage() {
    var jumpToNo = $(this).attr("value");//获取将要加载的分页号
    if(jumpToNo == "previous") {//上一页
        jumpToNo = parseInt($(".result-panel").attr("pageNo"))-1;
    }else if(jumpToNo == "next") {//下一页
        jumpToNo = parseInt($(".result-panel").attr("pageNo"))+1;
    }else {
        jumpToNo = parseInt(jumpToNo);
    }
    PAGE=jumpToNo;
    queryByNameForSchool();   		
		
}

在主页面里

function queryByNameForSchool(){
    		 $.ajax({
 	            type: 'POST',
 	            data:{
 		            page:PAGE,
 		            rows:PAGE_SIZE,
 		            keyWord:$("#searchInput").val(),
 		            city_code:(areaId_==340000||areaId_==undefined)?340100:areaId_,
 		            serial:serial
 		        },
 	            url: "./../schoolMonitor/queryByNameForSchool.do",
 	            success: function(result) {
 	            		$("#search_div").show();
 						itemShowForSchool(result.rows,0,result.rows.length>PAGE_SIZE?PAGE_SIZE:result.rows.length);
 						$(".result-panel").attr("pageNo",result.page);
 						initPageBar(result.records);
 	            },
 	            complete: function() {
 	            }
 	   }); 	
}

下面的方法：

//高校显示搜索结果
function itemShowForSchool(resultList,start,end){
	var divStr="";
	if(resultList.length==0){
		divStr='<div style="padding-top: 100px;margin-left: 70px;padding-bottom:200px"><font>对不起！没有查询到相关规划站！</font></div>';
	}else{	
		for(var i=start;i<end;i++){
	 		divStr+=' <div class="select_item" id="itemResult'+i+'" onmouseover="resultMouseOver(\'itemResult'+i+' \')" onmouseout="resultMouseOut(\'itemResult'+i+' \')"  onclick="toMarkerForSchool('+resultList[i].LONGITUDE+','+resultList[i].LATITUDE+',\' '+resultList[i].ID+' \',\' '+resultList[i].NAME+' \',true)"  >'
	 				+'<div class="img_icon"><img src="./../image/baseMerit/flag_icon.png"/></div>'
	 				+'<div style="margin-top: 16px;width:180px;margin-left:30px;">'+resultList[i].NAME+'</div>';			
	 		divStr+='<div style="color:#999999;margin-top: 5px;margin-left: 40px;">'+resultList[i].CITY_NAME+'   '+resultList[i].TYPE+'</div>';	 		
	 		divStr+='</div>';	 			 	
		}
	}
	$("#itemList").html(divStr);
}

页面：

<!-- 查询结果面板 -->
		<div id="search_div" style="display:none;"  class="result-panel" pageNo="1" clickIndex="-1">
			<div id="itemList" style="height:400px;overflow-x:hidden;overflow-y:auto;"></div>
			<!-- 分页 -->
			<div  style="text-align: center;" id="bottom_panel" class="bottom-panel">
				<div id='page_bar' class="page-bar"></div>
			</div>
		</div>