原生封装电商商城的分页器

最新推荐文章于 2022-11-01 17:33:19 发布

zhangyizuishuai

最新推荐文章于 2022-11-01 17:33:19 发布

阅读量155

点赞数

分类专栏：电商商城分页器 JavaScript

本文链接：https://blog.csdn.net/zhangyizuishuai/article/details/108761407

版权

JavaScript 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

电商商城分页器

1 篇文章 0 订阅

订阅专栏

前端电商商城项目分页器的原生js封装与使用详解

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分页器的使用以及封装</title>
</head>
<style>
    .box {
        width: 800px;
        height: 40px;
        border: 1px red solid;
    }
    .box div{
        user-select:none;
        cursor: pointer;
    }
    /* 因为会在box盒子内部生成div盒子所以我们给手型鼠标,并且让他点击不被选中变色 */
</style>
<body>
    <div class="box"></div>
   
</body>
<script src="./pagination.js"></script>
<!-- 上面封装的分液器js文件使用方法如下↓ -->
<!-- 因为是一个构造函数,所以需要new调用函数。 -->
<!-- 参数一:ele就是你想把分液器放在哪一个DOM元素上,
如果你想把分页器放在id为c的DOM元素上就填'#c'选择器写法就行 -->
<!-- 参数二是一个对象
对象包含的是分页信息

-->

<script>
    var box = document.querySelector(".box")
    new Pagination(box, {
        pageInfo: {
            pagenum: 1,//最初是第几页,第一次发请求是第几页,这里我们设置为第一页
            pagesize: 20,//一页面想放多少条数据的意思
            total: 100,//数据的总数量,总共有多少条数据
            totalpage: 5,//总共有多少页,页码的意思
        },
        textInfo: {
            first: "首页",//首页,字符串你可以随意改动,下面的以此类推
            prev: "上一页",//上一页
            next: "下一页",//下一页
            last: "尾页",//尾页
        },
        change(n) {
            console.log("n表示你选择的是第几页或者说你在输入框内填写的是第几页",n);
            // n是向后端发请求要第几页的数据
        }
    })
</script>
</html>

js封装代码如下js封装是上面代码中script标签内部引入的pagination.js

function Pagination(ele, options) {
  if (!ele) {
    throw new Error('方法必须传递参数，第一个为dom元素，第二个为对象');
  }
  this.ele = ele

  // 把用户传递进来的信息保存一下
  this.options = options || {}
  console.log(1);
  // 准备一些分页信息
  this.default = {
    pageInfo: {
      pagenum: 1, // 当前页数
      pagesize: 10, // 每页多少条
      total: 1000, // 数据总数
      totalpage: 100 // 页码总数
    },
    textInfo: {
      first: 'first',
      prev: 'prev',
      list: '',
      next: 'next',
      last: 'last'
    }
  }

  // 当页码发生改变的时候就执行这个函数
  this.change = this.options.change || function () { }

  // 提前准备一个变量，保存 list 里面的元素
  this.list = null

  // 调用过的入口函数
  this.init()
}

Pagination.prototype.init = function () {
  this.setDefault()
  this.setStyle()
  this.dongcidaci()
}

// 使用用户传递的信息替换我自己的信息
Pagination.prototype.setDefault = function () {
  if (this.options.pageInfo) {
    for (let attr in this.options.pageInfo) {
      this.default.pageInfo[attr] = this.options.pageInfo[attr]
    }
  }

  if (this.options.textInfo) {
    for (let attr in this.options.textInfo) {
      this.default.textInfo[attr] = this.options.textInfo[attr]
    }
  }
}

// 给大盒子设置样式
Pagination.prototype.setStyle = function () {
  this.ele.innerHTML = ''
  setCss(this.ele, {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center'
  })

  // 设置完样式就添加元素
  this.createEle()
  // 添加列表
  this.creteList()
  // 添加文本框
  this.go()
  // 禁用的判断
  this.isDis()

  // 动过以后要执行函数
  this.change(this.default.pageInfo.pagenum)
}

// 添加上一页下一页首页末页列表标签到 this.ele 里面
Pagination.prototype.createEle = function () {
  for (let attr in this.default.textInfo) {
    const div = document.createElement('div')
    div.className = attr
    if (attr === 'list') {
      this.list = div
      setCss(div, {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center'
      })
    } else {
      setCss(div, {
        border: '1px solid #333',
        padding: '0 5px',
        margin: '0 5px'
      })
    }
    div.innerHTML = this.default.textInfo[attr]
    this.ele.appendChild(div)
  }
}

// 设置页码
Pagination.prototype.creteList = function () {
  const pagenum = this.default.pageInfo.pagenum
  const totalpage = this.default.pageInfo.totalpage

  if (totalpage <= 9) { // 小于九个直接渲染
    for (let i = 1; i <= this.default.pageInfo.totalpage; i++) {
      const p = this.crealeP(i)
      this.list.appendChild(p)
    }
  } else { // 大于九个分成几个步骤来渲染
    if (pagenum < 5) {
      // 1 2 3 4 5 ... 99 100
      for (let i = 1; i <= 5; i++) {
        this.list.appendChild(this.crealeP(i))
      }

      const span = document.createElement('span')
      span.innerHTML = '...'
      this.list.appendChild(span)

      for (let i = totalpage - 1; i <= totalpage; i++) {
        this.list.appendChild(this.crealeP(i))
      }
    } else if (pagenum === 5) {
      // 1 2 3 4 5 6 7 ... 99 100
      for (let i = 1; i <= 7; i++) {
        this.list.appendChild(this.crealeP(i))
      }

      const span = document.createElement('span')
      span.innerHTML = '...'
      this.list.appendChild(span)

      for (let i = totalpage - 1; i <= totalpage; i++) {
        this.list.appendChild(this.crealeP(i))
      }

    } else if (pagenum > 5 && pagenum < totalpage - 4) {
      for (let i = 1; i <= 2; i++) {
        this.list.appendChild(this.crealeP(i))
      }

      const span = document.createElement('span')
      span.innerHTML = '...'
      this.list.appendChild(span)

      for (let i = pagenum - 2; i <= pagenum + 2; i++) {
        this.list.appendChild(this.crealeP(i))
      }

      const span2 = document.createElement('span')
      span2.innerHTML = '...'
      this.list.appendChild(span2)

      for (let i = totalpage - 1; i <= totalpage; i++) {
        this.list.appendChild(this.crealeP(i))
      }
    } else if (pagenum === totalpage - 4) {
      for (let i = 1; i <= 2; i++) {
        this.list.appendChild(this.crealeP(i))
      }

      const span = document.createElement('span')
      span.innerHTML = '...'
      this.list.appendChild(span)

      for (let i = totalpage - 6; i <= totalpage; i++) {
        this.list.appendChild(this.crealeP(i))
      }

    } else if (pagenum > totalpage - 4) {
      for (let i = 1; i <= 2; i++) {
        this.list.appendChild(this.crealeP(i))
      }

      const span = document.createElement('span')
      span.innerHTML = '...'
      this.list.appendChild(span)

      for (let i = totalpage - 4; i <= totalpage; i++) {
        this.list.appendChild(this.crealeP(i))
      }
    }
  }
}

// 提取了一个专门用来创建 li 的函数
Pagination.prototype.crealeP = function (i) {
  // i 形参就是要拿到循环中的 i 我好渲染文字
  // 和当前页面进行比较
  const p = document.createElement('p')

  p.innerHTML = i
  setCss(p, {
    border: '1px solid #333',
    margin: '0 5px',
    padding: '0 5px'
  })

  if (i === this.default.pageInfo.pagenum) {
    setCss(p, {
      backgroundColor: 'orange'
    })
  }

  return p
}

// 设置文本款和按钮
Pagination.prototype.go = function () {
  const inp = document.createElement('input')
  const btn = document.createElement('button')
  setCss(inp, {
    outline: 'none',
    width: '50px',
    height: '20px'
  })
  inp.value = this.default.pageInfo.pagenum
  inp.type = 'number'
  inp.setAttribute('min', '1')
  inp.setAttribute('max', this.default.pageInfo.totalpage)
  setCss(btn, {
    outline: 'none',
    width: '30px',
    height: '24px',
    marginLeft: '5px'
  })
  btn.innerHTML = 'go'
  this.ele.appendChild(inp)
  this.ele.appendChild(btn)
}

// 判断一下禁用
Pagination.prototype.isDis = function () {
  if (this.default.pageInfo.pagenum === 1) {
    this.ele.children[0].style.backgroundColor = '#ccc'
    this.ele.children[1].style.backgroundColor = '#ccc'
  }

  if (this.default.pageInfo.pagenum === this.default.pageInfo.totalpage) {
    this.ele.children[3].style.backgroundColor = '#ccc'
    this.ele.children[4].style.backgroundColor = '#ccc'
  }
}

// 动起来
Pagination.prototype.dongcidaci = function () {
  // 事件委托来做
  this.ele.addEventListener('click', e => {
    e = e || window.event
    const target = e.target

    if (target.className === 'first' && this.default.pageInfo.pagenum !== 1) {
      this.default.pageInfo.pagenum = 1
      this.setStyle()
    }

    if (target.className === 'prev' && this.default.pageInfo.pagenum !== 1) {
      this.default.pageInfo.pagenum--
      this.setStyle()
    }

    if (target.className === 'next' && this.default.pageInfo.pagenum !== this.default.pageInfo.totalpage) {
      this.default.pageInfo.pagenum++
      this.setStyle()
    }

    if (target.className === 'last' && this.default.pageInfo.pagenum !== this.default.pageInfo.totalpage) {
      this.default.pageInfo.pagenum = this.default.pageInfo.totalpage
      this.setStyle()
    }

    if (target.nodeName === 'P' && target.innerHTML - 0 !== this.default.pageInfo.pagenum) {
      this.default.pageInfo.pagenum = target.innerHTML - 0
      this.setStyle()
    }

    if (target.nodeName === 'BUTTON' && target.previousElementSibling.value - 0 !== this.default.pageInfo.pagenum) {
      this.default.pageInfo.pagenum = target.previousElementSibling.value - 0
      this.setStyle()
    }
  })
}

function setCss(ele, options) {
  for (let attr in options) {
    ele.style[attr] = options[attr]
  }
}

zhangyizuishuai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生封装电商商城的分页器

前端电商商城项目分页器的原生js封装与使用详解<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>分页器的使用以及封装</title></head>&
复制链接

扫一扫