蓝桥杯web【真题练习】课程列表--分页

最新推荐文章于 2023-08-04 20:01:47 发布

奇点435

最新推荐文章于 2023-08-04 20:01:47 发布

阅读量522

点赞数 5

分类专栏：蓝桥杯真题解析原生js 文章标签：前端

本文链接：https://blog.csdn.net/weixin_59624094/article/details/129433853

版权

蓝桥杯真题解析同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

原生js

2 篇文章 0 订阅

订阅专栏

课程列表

介绍

分页是前端页面中必不可少的一项功能，下面让我们一起来完成一个课程列表的分页吧。

目标

完成数据请求（数据来源 js/carlist.json）。在项目目录下已经提供了 axios，考生可自行选择是否使用。
完成数据分页显示，每页 5 条数据，默认当前页码为第一页（即 pageNum = 1 ），按照顺序第一页显示 1-5 条，第二页显示 6-10 条，依此类推。将每条数据显示到 list-group 元素中。使用已有代码中 list-group，不要修改 list-group 元素的 DOM 结构。动态渲染时，list-group 示例代码可删除。
当页码为第一页时，上一页为禁用状态（class=disabled），点击无任何变化。
当页码为最后一页时，下一页为禁用状态（class=disabled），点击无任何变化。
在 id 为 pagination 元素中正确显示当前页码和总页码（即最大页码）。当前页码变量使用 pageNum，总页码变量使用 maxPage。请勿修改当前页码和总页码的变量名称，以免造成判题无法通过。

代码答案

let pageNum = 1; // 当前页码，默认页码1
let maxPage; // 最大页数

// TODO：待补充代码
// 显示当前页码
function showPagination(maxPage,pageNum){
  //字符串中嵌入变量用 `      ` 这用${} 括号里的内容才能显示出来
  document.querySelector('#pagination').innerHTML = `共${maxPage}页，当前${pageNum}页`
}

function getPageData(data){
  return data.slice((pageNum - 1)*5,pageNum*5)
}
// toFixed(num)   方法可把 Number 四舍五入为指定小数位数的数字，num 为保留小数点的位数

// 渲染每页数据
function renderHtml(pageData){
  document.querySelector('#list').innerHTML = pageData.map(item =>`
  <!-- list-group 起始位置  list-group为示例代码，动态渲染时可删除-->
      <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">${item.name}</h5>
            <small>${(item.price / 100).toFixed(2)}元</small>
            
          </div>
          <p class="mb-1">
            ${item.description}
          </p>
        </a>
      </div>
      <!-- list-group 结束位置 -->
  `).join(``)
}
let data  //总数据
let pageData //每页数据


axios.get('./js/carlist.json')
.then(res=>{
  data = res.data;//把获得的carlist.json里 是数据（res.data）赋给总数据data
  console.log(data);
  maxPage = Math.ceil(data.length / 5);//ceil 向上取整
  console.log(maxPage,pageNum);
// 显示当前页码
  showPagination(maxPage,pageNum)
  // 得到每页数据
  pageData = getPageData(data)
  console.log(pageData)
  //渲染每页代码
  renderHtml(pageData)
})


// 点击上一页
let prev = document.getElementById("prev");
prev.onclick = function () {
  // TODO：待补充代码
  next.classList.remove('disabled')
  pageNum--
  console.log(pageNum)
  if(pageNum <= 1){
    this.classList.add('disabled')
    pageNum = 1
  }

  // 显示当前页码
  showPagination(maxPage,pageNum)
  // 得到每页数据
  pageData = getPageData(data)
  console.log(pageData)
  //渲染每页代码
  renderHtml(pageData)
};

// 点击下一页
let next = document.getElementById("next");
next.onclick = function () {
  // TODO：待补充代码

  prev.classList.remove('disabled')
  pageNum++
  console.log(pageNum)
  if(pageNum >= maxPage){
    this.classList.add('disabled')
    pageNum = maxPage

  }

  // 显示当前页码
  showPagination(maxPage,pageNum)
  // 得到每页数据
  pageData = getPageData(data)
  console.log(pageData)
  //渲染每页代码
  renderHtml(pageData)
};