使用jquery 写一个分页插件

使用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);
    })