实现效果
需要引入的文件
<link rel="stylesheet" type="text/css" href="page.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="page.js"></script>
index.html
<ul class="page" maxshowpageitem="5" pagelistcount="5" id="page"></ul>
<script type="text/javascript">
function myFn(curPage){
// 控制台打印当前页码
console.log(curPage);
}
$("#page").initPage(80,1,myFn);
</script>
page.css
.page{
list-style: none;
}
.page>li{
float: left;
padding: 5px 10px;
cursor: pointer;
}
.page .pageItem{
border: solid thin #DDDDDD;
margin: 5px;
}
.page .pageItemActive{
border: solid thin #dbdbdb;
margin: 5px;
background-color: #dbdbdb;
color:white;
}
.page .pageItem:hover{
border: solid thin #dbdbdb;
background-color: #dbdbdb;
color:white;
}
.page .pageItemDisable{
border: solid thin #DDDDDD;
margin: 5px;
background-color: #DDDDDD;
}
page.js
$.fn.extend({
"initPage":function(listCount,currentPage,fun){
var maxshowpageitem = $(this).attr("maxshowpageitem");
if(maxshowpageitem!=null&&maxshowpageitem>0&&maxshowpageitem!=""){
page.maxshowpageitem = maxshowpageitem;
}
var pagelistcount = $(this).attr("pagelistcount");
if(pagelistcount!=null&&pagelistcount>0&&pagelistcount!=""){
page.pagelistcount = pagelistcount;
}
var pageId = $(this).attr("id");
page.pageId=pageId;
if(listCount<0){
listCount = 0;
}
if(currentPage<=0){
currentPage=1;
}
page.setPageListCount(listCount,currentPage,fun);
}
});
var page = {
"pageId":"",
"maxshowpageitem":5,//最多显示的页码个数
"pagelistcount":10,//每一页显示的内容条数
/**
* 初始化分页界面
* @param listCount 列表总量
*/
"initWithUl":function(listCount,currentPage){
var pageCount = 1;
if(listCount>=0){
var pageCount = listCount%page.pagelistcount>0?parseInt(listCount/page.pagelistcount)+1:parseInt(listCount/page.pagelistcount);
}
var appendStr = page.getPageListModel(pageCount,currentPage);
$("#"+page.pageId).html(appendStr);
},
/**
* 设置列表总量和当前页码
* @param listCount 列表总量
* @param currentPage 当前页码
*/
"setPageListCount":function(listCount,currentPage,fun){
listCount = parseInt(listCount);
currentPage = parseInt(currentPage);
page.initWithUl(listCount,currentPage);
page.initPageEvent(listCount,fun);
fun(currentPage);
},
"initPageEvent":function(listCount,fun){
$("#"+page.pageId +">li[class='pageItem']").on("click",function(){
page.setPageListCount(listCount,$(this).attr("page-data"),fun);
});
},
"getPageListModel":function(pageCount,currentPage){
var prePage = currentPage-1;
var nextPage = currentPage+1;
var prePageClass ="pageItem";
var nextPageClass = "pageItem";
if(prePage<=0){
prePageClass="pageItemDisable";
}
if(nextPage>pageCount){
nextPageClass="pageItemDisable";
}
var appendStr ="";
appendStr+="<li class='"+prePageClass+"' page-data='1' page-rel='firstpage'>首页</li>";
appendStr+="<li class='"+prePageClass+"' page-data='"+prePage+"' page-rel='prepage'><上一页</li>";
var miniPageNumber = 1;
if(currentPage-parseInt(page.maxshowpageitem/2)>0&¤tPage+parseInt(page.maxshowpageitem/2)<=pageCount){
miniPageNumber = currentPage-parseInt(page.maxshowpageitem/2);
}else if(currentPage-parseInt(page.maxshowpageitem/2)>0&¤tPage+parseInt(page.maxshowpageitem/2)>pageCount){
miniPageNumber = pageCount-page.maxshowpageitem+1;
if(miniPageNumber<=0){
miniPageNumber=1;
}
}
var showPageNum = parseInt(page.maxshowpageitem);
if(pageCount<showPageNum){
showPageNum = pageCount
}
for(var i=0;i<showPageNum;i++){
var pageNumber = miniPageNumber++;
var itemPageClass = "pageItem";
if(pageNumber==currentPage){
itemPageClass = "pageItemActive";
}
appendStr+="<li class='"+itemPageClass+"' page-data='"+pageNumber+"' page-rel='itempage'>"+pageNumber+"</li>";
}
appendStr+="<li class='"+nextPageClass+"' page-data='"+nextPage+"' page-rel='nextpage'>下一页></li>";
appendStr+="<li class='"+nextPageClass+"' page-data='"+pageCount+"' page-rel='lastpage'>尾页</li>";
return appendStr;
}
}