【ajax实战08】分页功能

程序员微木2024-07-03 16:08

本文章目标：点击上/下一页按钮，实现对应页面的变化

实现基本步骤：

一：保存并设置文章总条数

设置一个全局变量，将服务器返回的数据返回给全局变量

二：点击下一页，做临界值判断，并切换页码参数并请求最新数据

核心代码

javascript 复制代码

searchUrl.page < Math.ceil(totalPage / searchUrl.page)

判断是否可以有下一页

三：点击上一页，做临界值判断，并切换页码参数并请求最新数据

javascript 复制代码

document.querySelector('.next').addEventListener('click', () => {
  if (searchUrl.page < Math.ceil(totalPage / searchUrl.page)) {
    searchUrl.page++
    document.querySelector('.page-now').innerHTML = `第${searchUrl.page}页`
    getArtileList()
  }
})
document.querySelector('.last').addEventListener('click', () => {
  if (searchUrl.page > 1) {
    searchUrl.page--
    document.querySelector('.page-now').innerHTML = `第${searchUrl.page}页`
    getArtileList()
  }
})