原生JavaScript实现前端翻页插件

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

配置与使用说明:

<div id="pageDom"></div>
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    //选填,开启第一页最后一页按钮,默认开启
    }
);
实际效果:

体验地址:原生JavaScript翻页插件

下载地址:点击进入GitHub下载

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

联系方式 QQ:896054682

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值