纯JS前端分页组件

分享一个自己写的前端分页组件

使用方法

① 引入css `你的目录/my-page-v1.0/MyPage.css`

② 引入js `你的目录/my-page-v1.0/MyPage.js`

引入后如图

如何使用

1 页面定义一个div,并加上id属性

2 在script中这样调用

<script>
    window.onload = function (){
        new MyPage({
            id: 'page', //ID
            page: {
                index: 18, //当前页
                total: 88754, //总数据条数
                limit: 10 // 每页显示条数
            },
            view:{ // 视图按钮文本(可选), 支持html元素 可以不配置
                prev: '上一页',
                next: '下一页',
                first: '首页',
                last: '尾页'
            },
            callback:{
                toPage(index, limit) { //跳转的当前页,每页显示条数
                    //核心方法, 需要重写, 每次点跳页都会调用该方法, 该方法会返回新的总数据条数,然后重新渲染
                    // 例:
                    // 请求服务器
                    // 得到请求结果
                    // 返回请求结果总条数即可
                    return 261;
                }
            }
        })
    }
</script>

预览

最后说明

资源包上传到需要的可以自行下载

链接: https://pan.baidu.com/s/1j-62DKE7sNqAFEqDlPDfrQ 提取码: 22ec

这个插件由于是初次编写, 肯定存在诸多不足, 肯定各位大佬指出,并会虚心接受, 由于js采用的是class 写法, 推荐使用Chrome浏览器进行使用, 最后在啰嗦一下, 有啥好建议, 就在评论区留下吧