为何筛选后JavaScript分页功能失效？技术问题咨询

你的分页功能在筛选后失效，核心问题是分页逻辑只在页面首次加载时初始化了一次，筛选后更新列表后没有重新触发分页的初始化流程，具体细节：

1. 分页的页码生成、事件绑定都写在window.addEventListener('load', ...)里，这个事件只会在页面第一次加载完成时执行，筛选后重新渲染了列表项，但分页的相关计算（比如总页数、列表项集合）还是用的旧数据。
2. 每次筛选后生成新的.item元素，但listItems变量是页面加载时获取的旧元素集合，没有更新，导致分页无法控制新的列表项。
3. 旧的页码没有清理，多次筛选后会生成重复的页码按钮，事件绑定也只针对旧按钮生效。

另外你代码里还重复定义了displayFilteredAccommodations函数，后面的定义会覆盖前面的，这也是潜在问题。

1. 合并重复的函数定义 #

删除前面那个空的displayFilteredAccommodations函数，只保留包含渲染列表和分页逻辑的那个。

2. 把分页逻辑封装成独立函数 #

把分页的初始化、事件绑定等逻辑抽成单独的initPagination函数，这样每次筛选后都能重新调用：

function initPagination() {
  const pageNumbers = document.querySelector(".pageNumbers");
  const paginationList = document.getElementById("data-container");
  const listItems = paginationList.querySelectorAll(".item");
  const prevButton = document.getElementById("prev");
  const nextButton = document.getElementById("next");

  const contentLimit = 10;
  const pageCount = Math.ceil(listItems.length / contentLimit);
  let currentPage = 1;

  // 先清空旧的页码，避免重复
  pageNumbers.innerHTML = '';

  const displayPageNumbers = (index) => {
    const pageNumber = document.createElement("a");
    pageNumber.innerText = index;
    pageNumber.setAttribute('href', "#");
    pageNumber.setAttribute("index", index);
    pageNumbers.appendChild(pageNumber);
  };

  const getPageNumbers = () => {
    for (let i = 1; i <= pageCount; i++) {
      displayPageNumbers(i);
    }
  };

  const disableButton = (button) => {
    button.classList.add("disabled");
    button.setAttribute("disabled", true);
  };

  const enableButton = (button) => {
    button.classList.remove("disabled");
    button.removeAttribute("disabled");
  };

  const controlButtonsStatus = () => {
    if (currentPage == 1) {
      disableButton(prevButton);
    } else {
      enableButton(prevButton);
    }
    if (pageCount == currentPage) {
      disableButton(nextButton);
    } else {
      enableButton(nextButton);
    }
  };

  const handleActivePageNumber = () => {
    document.querySelectorAll('.pageNumbers a').forEach((button) => {
      button.classList.remove("active");
      const pageIndex = Number(button.getAttribute("index"));
      if (pageIndex == currentPage) {
        button.classList.add('active');
      }
    });
  };

  const setCurrentPage = (pageNum) => {
    currentPage = pageNum;

    handleActivePageNumber();
    controlButtonsStatus();

    const prevRange = (pageNum - 1) * contentLimit;
    const currRange = pageNum * contentLimit;

    listItems.forEach((item, index) => {
      item.classList.add('hidden');
      if (index >= prevRange && index < currRange) {
        item.classList.remove('hidden');
      }
    });
  };

  // 初始化页码和按钮状态
  getPageNumbers();
  setCurrentPage(1);

  // 重新绑定按钮事件
  prevButton.onclick = () => {
    if (currentPage > 1) {
      setCurrentPage(currentPage - 1);
    }
  };

  nextButton.onclick = () => {
    if (currentPage < pageCount) {
      setCurrentPage(currentPage + 1);
    }
  };

  // 绑定页码点击事件
  document.querySelectorAll('.pageNumbers a').forEach((button) => {
    const pageIndex = Number(button.getAttribute('index'));
    if (pageIndex) {
      button.onclick = () => {
        setCurrentPage(pageIndex);
      };
    }
  });
}

3. 修改displayFilteredAccommodations函数 #

在渲染完新的列表项后，调用initPagination()，同时删掉原来的window.addEventListener('load', ...)部分，因为现在每次筛选都会初始化分页：

function displayFilteredAccommodations() {
  const filteredAccommodations = filterAccommodations(jsonData, selectedTypes, selectedPriceRanges, selectedLocations);
  console.log("Updated filteredAccommodations:", filteredAccommodations);

  // Clear the previous results
  const container = document.getElementById('data-container');
  container.innerHTML = '';

  // Create and populate data elements for the filtered accommodations
  filteredAccommodations.forEach(function (item) {
    const dataItem = document.createElement('div');
    dataItem.className = 'item';
    dataItem.innerHTML = '<h2>' + item.Name + '</h2>' + 
      '<p><strong>Industry</strong> ' + item.Industry + '</p>' +
      '<p><strong>Location:</strong> ' + item.Town + '</p>' +
      '<p><strong>Tags:</strong> ' + item.Tags + '</p>' +
      '<p><strong>Price:</strong> R' + item.Price + '</p>';

    container.appendChild(dataItem);
  });

  // 每次渲染完列表后重新初始化分页
  initPagination();
}

4. 初始化调用 #

页面加载完成后调用一次displayFilteredAccommodations()，确保首次加载时就有分页：

// 页面加载完成后初始化
window.addEventListener('load', () => {
  displayFilteredAccommodations();
});

• 分页逻辑不再依赖页面加载事件，而是每次筛选后重新初始化，确保用的是最新的列表数据。
• 每次初始化分页前清空旧的页码，避免重复生成。
• 重新绑定分页按钮的事件，确保新生成的页码能正常点击。

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