使用jquery 写一个分页插件
预览地址:https://zshsats.github.io/fileDemo/plugin/page/index.html
github:https://github.com/zshsats/fileDemo/tree/master/plugin/page
效果图:
使用用法:
样式可自行修改,这里只做简单处理
body{
background: #3C474C;
}
.page-content{
padding: 15px;
}
.item {
display: inline-block;
width: 3em;
vertical-align: middle;
line-height: 2;
text-align: center;
background: #fff;
}
在需要引入插件的位置放入下面代码
如果不想写那么多,可以动态生成
<div class="public-page clearfix">
<div class="page-content">
<div class="item" data-value="first">
首页
</div>
<div class=" item up-page" data-value="up">
<
</div>
<div class="item" data-value="next">
>
</div>
<div class="item" data-value="last">
尾页
</div>
</div>
</div>
插件 js 进入
引入page.js 即可
调用
25 即第一个参数代表总页数
6 第二个参数代表一次显示多少页
pageNum 回调参数 结果为当前点击的页数
$.pageFun(25, 6, function (pageNum) {
console.log(pageNum);
})