原生js实现简单的分页插件
2019-08-13 本文已影响0人
深漂浪子
最近项目由于使用了特别复古的jQuery版本，导致jQuery版的分页插件都不能正常使用，于是在网上查找资料，在前人的基础上做了优化，下面是相关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">
//初始化调用
new Paging('page',{
curPage: 1, //当前页（默认1）
count:22,//总数据
size:10,//页码尺寸（默认10）
showSize:6,//最多可显示的页面(默认5)
callback: function(curPage,totalCount,isfirst){
console.log('当前页：'+curPage);
// console.log('总页：'+totalCount);
//首次不执行
if(!isfirst){
//do something
// console.log(curPage);
}
}
});
</script>
</html>
myPage.js代码可以到码云上下载https://gitee.com/zhongxiaoyou1314520/codes/b9du0iovlhrwyqc63a1je34#0-sqq-1-59170-9737f6f9e09dfaf5d3fd14d775bfee85
，如果觉得有帮助的话可以给个星星哈！
