餐饮网站菜单筛选分页问题：筛选后无法按每页15条重新分页

问题核心：筛选分类时，分页逻辑仍基于所有产品的原始索引，导致当前页仅显示原页面内符合条件的菜品，无法将其他页的符合项填充进来，达不到每页15条的要求。

修改后的完整代码 #

JavaScript

const categoryCheckboxes = document.querySelectorAll(".category-filter");
const products = document.querySelectorAll(".product");
const prevPageButton = document.getElementById("prevPage");
const nextPageButton = document.getElementById("nextPage");
let currentPage = 1;
const productsPerPage = 15;

categoryCheckboxes.forEach((checkbox) => {
  checkbox.addEventListener("change", () => {
    // 切换筛选条件时重置到第一页
    currentPage = 1;
    updateProducts();
  });
});

function updateProducts() {
  const selectedCategories = Array.from(categoryCheckboxes)
    .filter((checkbox) => checkbox.checked)
    .map((checkbox) => checkbox.value);

  // 筛选出所有符合条件的产品
  const filteredProducts = Array.from(products).filter(product => {
    const productCategories = product.className
      .split(" ")
      .filter((className) => className !== "product");
    return selectedCategories.length === 0 || selectedCategories.some(category => productCategories.includes(category));
  });

  // 先隐藏所有产品
  products.forEach(product => product.style.display = "none");

  // 计算当前页要显示的产品范围
  const startIndex = (currentPage - 1) * productsPerPage;
  const endIndex = startIndex + productsPerPage;
  const productsToShow = filteredProducts.slice(startIndex, endIndex);

  // 显示当前页的产品
  productsToShow.forEach(product => product.style.display = "block");

  updatePagination(filteredProducts.length);
}

function updatePagination(totalFilteredProducts) {
  const totalPages = Math.ceil(totalFilteredProducts / productsPerPage);

  prevPageButton.disabled = currentPage <= 1;
  nextPageButton.disabled = currentPage >= totalPages;
}

prevPageButton.addEventListener("click", () => {
  if (currentPage > 1) {
    currentPage--;
    updateProducts();
  }
});

nextPageButton.addEventListener("click", () => {
  const selectedCategories = Array.from(categoryCheckboxes)
    .filter((checkbox) => checkbox.checked)
    .map((checkbox) => checkbox.value);
  const filteredProducts = Array.from(products).filter(product => {
    const productCategories = product.className
      .split(" ")
      .filter((className) => className !== "product");
    return selectedCategories.length === 0 || selectedCategories.some(category => productCategories.includes(category));
  });
  const totalPages = Math.ceil(filteredProducts.length / productsPerPage);
  
  if (currentPage < totalPages) {
    currentPage++;
    updateProducts();
  }
});

updateProducts();

CSS

.product {
  display: block;
}

.pagination {
  margin-top: 20px;
}

HTML

<h1>Food Catering Menu</h1>

<label for="salty">Salty</label>
<input style="margin-right: 20px" type="checkbox" id="salty" class="category-filter" value="salty" />

<label for="sweet">Sweet</label>
<input style="margin-right: 20px" type="checkbox" id="sweet" class="category-filter" value="sweet" />

<label for="sandwich">Sandwich</label>
<input style="margin-right: 20px" type="checkbox" id="sandwich" class="category-filter" value="sandwich" />

<label for="salad">Salad</label>
<input style="margin-right: 20px" type="checkbox" id="salad" class="category-filter" value="salad" />

<label for="fruits">Fruits</label>
<input style="margin-right: 20px" type="checkbox" id="fruits" class="category-filter" value="fruits" />

<div class="products">
  <div style="color: red; text-decoration: underline" class="product salty">
    Salty Food 1
  </div>
  <div class="product sweet">Sweet Food 2</div>
  <div class="product sandwich">Sandwich 3</div>
  <div class="product salad">Salad 4</div>
  <div class="product fruits">Fruit 5</div>
  <div style="color: red; text-decoration: underline" class="product salty">
    Salty Food 6
  </div>
  <div class="product sweet">Sweet Food 7</div>
  <div style="color: red; text-decoration: underline" class="product salty">
    Salty Food 8
  </div>
  <div class="product sweet">Sweet Food 9</div>
  <div class="product sandwich">Sandwich 10</div>
  <div class="product salad">Salad 11</div>
  <div class="product fruits">Fruit 12</div>
  <div style="color: red; text-decoration: underline" class="product salty">
    Salty Food 13
  </div>
  <div class="product sweet">Sweet Food 14</div>
  <div class="product sweet">Sweet Food 15</div>
  <div style="color: red; text-decoration: underline" class="product salty">
    Salty Food 16
  </div>
  <div class="product sweet">Sweet Food 17</div>
  <div class="product sandwich">Sandwich 18</div>
  <div class="product salad">Salad 19</div>
  <div class="product fruits">Fruit 20</div>
  <div style="color: red; text-decoration: underline" class="product salty">
    Salty Food 21
  </div>
  <div class="product sweet">Sweet Food 22</div>
  <div style="color: red; text-decoration: underline" class="product salty">
    Salty Food 23
  </div>
  <div class="product sweet">Sweet Food 24</div>
  <div class="product sandwich">Sandwich 25</div>
  <div class="product salad">Salad 26</div>
  <div class="product fruits">Fruit 27</div>
  <div style="color: red; text-decoration: underline" class="product salty">
    Salty Food 28
  </div>
  <div class="product sweet">Sweet Food 29</div>
  <div class="product sweet">Sweet Food 30</div>
  <div style="color: red; text-decoration: underline" class="product salty">
    Salty Food 31
  </div>
  <div class="product sweet">Sweet Food 32</div>
  <div class="product sandwich">Sandwich 33</div>
  <div class="product salad">Salad 34</div>
  <div class="product fruits">Fruit 35</div>
  <div style="color: red; text-decoration: underline" class="product salty">
    Salty Food 36
  </div>
  <div class="product sweet">Sweet Food 37</div>
  <div style="color: red; text-decoration: underline" class="product salty">
    Salty Food 38
  </div>
  <div class="product sweet">Sweet Food 39</div>
  <div class="product sandwich">Sandwich 40</div>
  <div class="product salad">Salad 41</div>
  <div class="product fruits">Fruit 42</div>
  <div style="color: red; text-decoration: underline" class="product salty">
    Salty Food 43
  </div>
  <div class="product sweet">Sweet Food 44</div>
  <div class="product sweet">Sweet Food 45</div>
  <div style="color: red; text-decoration: underline" class="product salty">
    Salty Food 46
  </div>
  <div class="product sweet">Sweet Food 47</div>
  <div class="product sandwich">Sandwich 48</div>
  <div class="product salad">Salad 49</div>
  <div class="product fruits">Fruit 50</div>
</div>

<div class="pagination">
  <button id="prevPage">Previous Page</button>
  <button id="nextPage">Next Page</button>
</div>

关键修改说明 #

1. 筛选优先：先生成符合分类条件的filteredProducts数组，分页逻辑完全基于这个筛选后的集合，不再依赖原始产品的索引。
2. 页码重置：切换筛选条件时自动重置currentPage为1，避免出现当前页超过筛选后总页数的无效状态。
3. 统一显示逻辑：每次更新时先隐藏所有产品，再根据当前页范围显示筛选结果中的对应项，确保页面只展示符合要求的内容。
4. 分页逻辑同步：updatePagination和分页按钮的点击事件都基于筛选后的产品数量计算总页数，保证分页按钮的禁用状态准确。

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