原生js实现分页效果

最新推荐文章于 2023-06-26 15:39:28 发布

VIP文章 zyfacd

最新推荐文章于 2023-06-26 15:39:28 发布

阅读量252

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/zyfacd/article/details/105416424

版权

效果如下:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style type="text/css">
  	
  </style>
</head>
<body>
  <div id="page-nation"></div>
  <script src="./page.js"></script>
  <script>  
    //分页调用方法  
    const Api=new pageNation({
     
        el:"#page-nation",//分页器位置  
        page:1,//当前页  
        size:5,//默认5,10,15,20  
        total:100,//数据总条数  
        styUrl:
        './page.css',//样式地址（可修改）  
                IsShowBtn: {
   //设置需要显示的按钮
                    choosePageSize: true,//是否显示下拉选项
                    IsShowPrevOrNextBtn: true,//是否显示上一页下一页按钮
                    IsShowEnterBtn: true,//是否显示跳转输入
                    IsShowTotalPage:true,//是否显示总页数
                },
        callback:function(page,size,total){
     
          console.log(page,size,total);  
          //此处为ajax请求  
        }  
    });    
</script>  
</body>
</html>

page.js

var pageNation;
pageNation = (function () {
   
    function extend(target, source) {
   
        for (var obj in source) {
   
            target[obj] = source[obj];
        }
        return target;
    }
    function pageNation(options) {
   
        var defaultOptions = {
   
            el: "body",//分页父容器  
            page: 1,
            size: 10,
            total: 0,
            styUrl: 'style.css',
            callback: null,
            IsShowBtn: {
   //设置需要显示的按钮
                choosePageSize: true,//是否显示下拉选项
                IsShowPrevOrNextBtn: true,//否显示上一页下一页按钮
                IsShowEnterBtn: true,//是否显示跳转输入
                IsShowTotalPage:true,//是否显示总页数
            }
        };
        this.options = extend(defaultOptions, options) || {
   };
        this.options.el = document.querySelectorAll(this.options.el)[0];
        this.pageT = Math.ceil(this.options.total / this.options.size);
        this.init();
        if (!document.querySelector("#dynamic-style")) {

最低0.47元/天解锁文章

zyfacd

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
原生js实现分页效果

效果如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫