13届蓝桥杯-课程列表说明-CSDN博客

本文链接：https://blog.csdn.net/m0_62785037/article/details/129808407

该代码示例展示了如何利用JavaScript和Axios从JSON文件获取数据，然后在HTML页面中进行分页显示。通过点击上一页和下一页按钮，动态更新当前页码并重新渲染课程列表。同时，代码处理了页码边界条件，确保用户不能导航到超出范围的页码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

详细请看代码

index.html文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>课程列表</title>
    <script src="./js/axios.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.css" />
    <style>
      * {
         outline: none;
      }

      h1 {
        text-align: center;
      }
    </style>
  </head>

  <body>
    <h1>课程列表</h1>

    <div id="list">
      <!-- list-group 起始位置  list-group为示例代码，动态渲染时可删除-->
      <div class="list-group">
      
      </div>
      <!-- list-group 结束位置 -->
    </div>
    <div class="container">
      <div class="row">
        <div class="col-6">
          <nav aria-label="Page navigation">
            <ul class="pagination">
              <li id="prev" class="page-item disabled">
                <a class="page-link" href="javascript:void(0)">上一页</a>
              </li>
              <li id="next" class="page-item">
                <a class="page-link" href="javascript:void(0)">下一页</a>
              </li>
            </ul>
          </nav>
        </div>
        <div class="col">
          <div id="pagination"></div>
        </div>
      </div>
    </div>
  </body>
  <script src="./js/index.js"></script>
</html>

index.js文件

let pageNum = 1; // 当前页码，默认页码1
let maxPage; // 最大页数
let totalData;  //声明ajax拿到的总数据

// TODO：待补充代码
// 展示页面的函数
function showPage(maxPage,pageNum){
        document.querySelector("#pagination").innerHTML=`
          共${maxPage}页，当前${pageNum}页        
        `
}
// 展示当前页的函数
function totayPage(totalData){
  // 数据的剪切因为一页需要5条数据
  const narr=totalData.slice((pageNum-1)*5,pageNum*5)
  // 往容器里面插入值，通过map遍历可以将遍历的所有数组放入容器里面
   document.querySelector(".list-group").innerHTML=narr.map(item=>`<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}元</small>
    </div>
    <p class="mb-1">
      ${item.description}
    </p>
  </a>`
   ).join("")
  //  因为map遍历的数组返回值是数组，我们采用join()方法拼接成字符串
}
axios({
  method:"GET",
  url:"js/carlist.json"
}).then(res=>{
  maxPage=Math.ceil(res.data.length/5)
  totalData=res.data
  totayPage(totalData)
  showPage(maxPage,pageNum)
}).catch(err=>{
  console.log(err);
})
// 点击上一页
let prev = document.getElementById("prev");
prev.onclick = function () {
    next.classList.remove("disabled")
    pageNum--

  if(pageNum<=1){
   
    pageNum=1
    this.classList.add("diabled")
  }
  // 每点击一次，页面，当页数据会发生改变
  showPage(maxPage,pageNum)
  totayPage(totalData)
 
  // TODO：待补充代码
};
// 点击下一页
let next = document.getElementById("next");
next.onclick = function () {
  prev.classList.remove("disabled")
  // TODO：待补充代码
  pageNum++

  if(pageNum>=maxPage){
    pageNum=maxPage
    this.classList.add("disabled")
    console.log(maxPage);
  }
    // 每点击一次，页面，当页数据会发生改变
  showPage(maxPage,pageNum)
  totayPage(totalData)

};