原生JavaScript实现前端翻页插件

本是古典何须时尚 2022-05-31 02:35 364阅读 0赞

之前做项目有遇到需要使用翻页插件，公司原来使用的是基于jQuery和bootstrap扩展的插件，依赖较多，后来自己就尝试着用原生的JS实现插件效果，由于技术水平有限，花了一天多时间算是完工，但可能还有一些BUG本人未完全测试出，一些代码逻辑也有待改进，望谅解。

配置与使用说明：

var pageDom = document.getElementById("pageDom");
    pagination.bindPageEvent(pageDom, {   //通常都是ajax读取到数据后进行事件绑定
        param:{   //*必填，列表查询参数
            pageIndex:1,  //*必填，查询页码
            pageSize:5   //*必填，查询单页数量
        },
        total:100,  //*必填，数据总量
        callback:function(index,size){    //选填，分页回调函数,返回index：当前页页码，size：每页显示条数，建议填写
            console.log("当前页页码："+index,"每页显示条数："+size)
        },  
        countList:[5,10,15,20],  //选填，列表查询参数
        defaultCount:10,  //选填，每页显示数据量，默认5
        openCountSelect:true,    //选填，开启每页显示下拉选择，默认开启
        openSkip:true,  //选填，开启页面跳转功能，默认开启
        openPN:true,    //选填，开启上一页下一页按钮，默认开启
        openFL:true    //选填，开启第一页最后一页按钮，默认开启
        }
    );

实际效果： ![SouthEast][]

体验地址：[原生JavaScript翻页插件][JavaScript]

下载地址：[点击进入GitHub下载][GitHub]

如果觉得好用请给个star，有意见或建议欢迎提出，谢谢！

联系方式 QQ：896054682

[SouthEast]: /images/20220531/860d2459180f472aaba9c344c861feb2.png
[JavaScript]: https://xiaoleng123.github.io/pagination/pagination.html
[GitHub]: https://github.com/Xiaoleng123/Pagenation