使用Pokemon TCG API开发时如何实现每页最多6张卡牌的分页功能

实现逻辑说明 #

• 全局存储全量卡牌数据、当前页码、每页展示数三个变量，避免重复发起API请求
• 单独封装renderPage函数，负责根据当前页码截取对应区间的卡牌数据渲染到页面
• 新增分页操作按钮，点击时修改当前页码后重新调用渲染函数即可
• 动态判断分页按钮可用状态：当前为第1页时禁用上一页，当前为最后一页时禁用下一页

改造后代码 #

// 全局变量存储数据和分页状态
let allCards = [];
let currentPage = 1;
const pageSize = 6;

$(document).ready(function (e) {
  // 搜索提交逻辑
  $("#TheSubmitButton").on("click", function(event){
    $("#card-container").empty();
    event.preventDefault();
    var pokemon = $("#searchInput").val().trim();

    $.ajax({
      method: "GET",
      url: "https://api.pokemontcg.io/v2/cards?q=name:" + pokemon
    }).then(function(response){
      // 把全量数据存到全局变量，重置页码为第一页
      allCards = response.data;
      currentPage = 1;
      // 渲染第一页
      renderPage();
      // 更新分页按钮状态
      updatePaginationBtns();
    });
  });

  // 上一页按钮点击逻辑
  $("#prevBtn").on("click", function() {
    if (currentPage > 1) {
      currentPage--;
      renderPage();
      updatePaginationBtns();
    }
  });

  // 下一页按钮点击逻辑
  $("#nextBtn").on("click", function() {
    const totalPage = Math.ceil(allCards.length / pageSize);
    if (currentPage < totalPage) {
      currentPage++;
      renderPage();
      updatePaginationBtns();
    }
  });

  // 渲染指定页卡牌的函数
  function renderPage() {
    $("#card-container").empty();
    // 计算当前页需要展示的卡牌起始和结束下标
    const startIndex = (currentPage - 1) * pageSize;
    const endIndex = startIndex + pageSize;
    const pageCards = allCards.slice(startIndex, endIndex);

    // 循环渲染当前页的卡牌
    for (var i = 0; i < pageCards.length; i++) {
      var pokeTainer = $("<div class='poketainer'></div>");

      var pokemonName = $("<div></div>");
      pokemonName.text(pageCards[i].name);
      pokeTainer.append(pokemonName);

      var pokemonCard = $("<img class='pkmn-card'>");
      pokemonCard.attr("src", pageCards[i].images.small);
      pokeTainer.append(pokemonCard);
                  
      var pokemonEvolve = $("<div></div>");
      pokemonEvolve.text('Evolves to: ' + pageCards[i].evolvesTo);
      pokeTainer.append(pokemonEvolve);
                  
      var pokemonFlavor = $("<div></div>");
      pokemonFlavor.text(pageCards[i].flavorText);
      pokeTainer.append(pokemonFlavor);

      var pokemonTypes = $("<div></div>");
      pokemonTypes.text(pageCards[i].types);
      pokeTainer.append(pokemonTypes);
                  
      $("#card-container").append(pokeTainer);
    }

    // 更新页码展示
    const totalPage = Math.ceil(allCards.length / pageSize);
    $("#pageInfo").text(`第 ${currentPage} 页 / 共 ${totalPage} 页`);
  }

  // 更新分页按钮禁用状态
  function updatePaginationBtns() {
    const totalPage = Math.ceil(allCards.length / pageSize);
    $("#prevBtn").prop("disabled", currentPage === 1);
    $("#nextBtn").prop("disabled", currentPage === totalPage);
  }
});

配套HTML补充 #

你需要在原有HTML中新增分页控制区域的代码：

<div class="pagination-wrap">
  <button id="prevBtn">上一页</button>
  <span id="pageInfo"></span>
  <button id="nextBtn">下一页</button>
</div>

内容的提问来源于stack exchange，提问作者MoxOnCrocs