最近項目由于使用了特別復(fù)古的jQuery版本绎速，導(dǎo)致jQuery版的分頁插件都不能正常使用虾啦，于是在網(wǎng)上查找資料锰扶，在前人的基礎(chǔ)上做了優(yōu)化本谜，下面是相關(guān)demo案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原生js分頁組件</title>
<style>
html,body{
padding:0;
margin:0;
}
p{
padding:0;
margin:0;
}
#page{
width:460px;
margin: 10px auto;
}
.Paging{
overflow: hidden;
width:100%;
}
.Paging-item{
float: left;
cursor: pointer;
padding: 5px 10px;
background-color: rgb(250, 250, 250);
color: rgb(51, 51, 51);
border: 1px solid rgb(221, 221, 221);
margin-left: -1px;
text-decoration: none;
text-decoration: none;
font-size: 14px;
}
.Paging a.Paging-item:first-child{
margin-left: 0;
}
.Paging-item-active{
padding: 5px 10px;
background-color: rgb(56, 142, 60);
color: rgb(255, 255, 255);
border: 1px solid rgb(221, 221, 221);
margin-left: -1px;
text-decoration: none;
pointer-events: none;/*不可點擊*/
}
</style>
</head>
<body>
<div id="page"></div>
</body>
<script type="text/javascript" src="myPage.js"></script>
</script>
<script type="text/javascript">
//初始化調(diào)用
new Paging('page',{
curPage: 1, //當(dāng)前頁（默認(rèn)1）
count:22,//總數(shù)據(jù)
size:10,//頁碼尺寸（默認(rèn)10）
showSize:6,//最多可顯示的頁面(默認(rèn)5)
callback: function(curPage,totalCount,isfirst){
console.log('當(dāng)前頁：'+curPage);
// console.log('總頁：'+totalCount);
//首次不執(zhí)行
if(!isfirst){
//do something
// console.log(curPage);
}
}
});
</script>
</html>
myPage.js代碼可以到碼云上下載https://gitee.com/zhongxiaoyou1314520/codes/b9du0iovlhrwyqc63a1je34#0-sqq-1-59170-9737f6f9e09dfaf5d3fd14d775bfee85
初家，如果覺得有幫助的話可以給個星星哈！
