案例--分页渲染

分析:

  1. 分析数据的使用

    + 原始数据是 list, 一共有 28 条数据

    + 当你显示的是第一页的时候, 根据当前页和一页显示多少条从原始数组里面截取出来一个新的数组

      => 使用截取出来的新数组来渲染页面

      => 例子: 一页 4 条

      => 第 1 页, 使用 list 中, 索引 [0] [1] [2] [3] 四条数据渲染页面

      => 第 2 页, 使用 list 中, 索引 [4] [5] [6] [7] 四条数据渲染页面

      => ...

  2. 渲染页面

    2-1. 准备一个空字符串

    2-2. 按照结构和数组, 把字符串组装好

      => 按照数组渲染, 使用的不再是原始数组了

      => 而是根据当前第几页和一页多少条截取出来的新数组

    2-3. 把组装好的字符串插入到指定结构内

    + 把渲染页面放在一个函数内, 每次切换页面的时候直接调用

代码实现:

  1. 获取元素

    => ul, 因为所有的结构都插入到 ul 标签内

    => 上一页按钮: 因为有点击事件

    => 下一页按钮: 因为有点击事件

    => 总页数标签: 需要渲染

    => select 标签

  2. 准备一些变量

    => current: 表示当前是第几页

    => pagesize: 表示一页多少条数据

    => total: 表示一共多少页

  3. 准备一个渲染页面的函数

    3-1. 截取数组

      => 根据 当前第几页 和 一页多少条 从 list 原始数组中截取出来一部分内容

      => 用作当前的渲染

    3-2. 渲染页面

      => 根据我截取出来的数组渲染页面

    3-3. 渲染当前页和总页数位置

      => 根据 list 的总数和一页显示多少条来计算

    3-4. 渲染按钮是否有 disable 类名

      => 如果当前是第 1 页, prevBtn 需要有 disable 类名, 否则没有

      => 如果当前是最后一页, nextBtn 需要有 disable 类名, 否则没有

  4. 上一页下一页的点击事件

    4-1. 下一页操作

      => 判断, 如果当前已经是最后一页了, 就不要执行了

      => 让当前页++

      => ++ 之后, 再次执行一遍 bindHtml()

    4-2. 下一页操作

  5. 修改一页显示多少条

    => 核心: 根据 select 选中的内容, 修改 pagesize 变量

    => 只要我们能拿到 select 选中的内容就可以了

    => select 标签有一个叫做 onchange 事件

      -> 当 select 标签选中的内容发生改变的时候触发

    => 如何拿到 select 选中的内容

      -> select 的 value 就是选中的那个 option 的 value

---

分析页数: 一页 4 条

  => 第 1 页: list.slice(0, 4)

  => 第 2 页: list.slice(4, 8)

  => 第 3 页: list.slice(8, 12)

  => 第 x 页: list.slice((当前页 - 1) * 一页多少条, 当前页 * 一页多少条)

---

分析总页数

  + 假设一共 100 条数据

  + 如果一页显示 10 条, 10 页

  + 100 / 10 === 10

  + 假设一共 108 条数据

  + 如果一页显示 10 条, 前 10 页, 一页 10 条, 最后一页, 只有 8 条

  + 108 / 10 === 10.8  得到结果是 11 页

总条数

  + list 是原始数组

  + list 的长度是多少, 就是有多少条数据

  + list.length 就是总条数

  + Math.ceil(list.length / pagesize)

<div class="filter">
    <p class="prev disable">&lt;</p>
    <span class="total">1 / 1</span>
    <p class="next">&gt;</p>
    <select>
      <option value="4">4</option>
      <option value="6">6</option>
      <option value="8">8</option>
      <option value="12">12</option>
    </select>
  </div>
  <div class="content">
    <ul>
      <li>
        <img src="https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01zJEpaN2GdSG1Xvo8y_!!2251059038.jpg" alt="">
        <p>2020西太湖国际音乐节</p>
        <p>城市: 常州</p>
        <p>地址: 常州西太湖中国花卉博览景区北门</p>
        <p>价格: 199-399</p>
        <p>演出时间: 2020.09.19-09.20</p>
      </li>
    </ul>
  </div>

// 1. 获取元素
let ul = document.querySelector('.content > ul')
let prevBtn = document.querySelector('.prev')
let nextBtn = document.querySelector('.next')
let totalBox = document.querySelector('.total')
let selectBox = document.querySelector('select')

// 2. 准备变量
let current = 1
let pagesize = 4
let total = 1

// 3. 准备一个渲染页面的函数
bindHtml()
let bindHtml = () => {
  // 3-1. 截取出当前页需要渲染的小数组
  let bind = list.slice((current - 1) * pagesize, current * pagesize)

  // 3-2. 根据截取出来的数组渲染页面
  let str = ''
  bind.forEach(item => {
    str += `
      <li>
        <img src="${ item.pic }">
        <p>${ item.name }</p>
        <p>城市: ${ item.city }</p>
        <p>地址: ${ item.address }</p>
        <p>价格: ${ item.price }</p>
        <p>演出时间: ${ item.showTime }</p>
      </li>
    `
  })
  ul.innerHTML = str

  // 3-3. 计算总页数
  total = Math.ceil(list.length / pagesize)
  // 渲染 totalBox 标签
  totalBox.innerHTML = current + ' / ' + total

  // 3-4. 渲染前后按钮的 disable 类名
  // 如果当前是 第 1 页, prevBtn 的 类名是 'prev disable', 否则就是 'prev'
  prevBtn.className = current <= 1 ? 'prev disable' : 'prev'
  // 如果当前是 最后一个, nextBtn 的 类名是 'next disable', 否则就是 'next'
  nextBtn.className = current >= total ? 'next disable' : 'next'
}

// 4. 上一页和下一页
// 4-1. 下一页
nextBtn.onclick = () => {
  // 判断, 如果 current 已经是最后一页了, 那么直接 return
  if (current >= total) return
  // 修改当前页
  current++
  // 从新调用 bindHtml()
  bindHtml()
}

// 4-2. 上一页
prevBtn.onclick = () => {
  // 判断, 如果 current 是第一页, 那么直接 return
  if (current <= 1) return
  // 修改当前页
  current--
  // 从新调用 bindHtml()
  bindHtml()
}

// 5. 改变一页显示多少条
selectBox.onchange = () => {
  // 5-1. 拿到 select 当前选中的内容, 赋值给 pagesize
  pagesize = selectBox.value - 0

  // 5-2. 把当前页回归到 1
  current = 1

  // 5-3. 从新渲染页面
  bindHtml()
}