Ajax分页无法记忆上一页位置的技术问题求助

我明白你的问题了——这种分页后跳转返回丢失页码的情况确实很影响用户体验。问题出在你当前的实现没有把用户浏览的页码状态保存下来，所以当你从帖子页面返回时，页面重新加载，默认又调用了showRecords(10, 1)回到第一页。下面给你几个可行的解决方案：

方案一：用localStorage保存当前页码（简单直接） #

这个方法会把用户点击的页码存在浏览器的本地存储里，页面加载时优先读取这个值，没有的话再用默认的第一页。

修改index.php里的前端脚本 #

function showRecords(perPageCount, pageNumber) {
  // 把当前页码存到localStorage
  localStorage.setItem('currentVillaPage', pageNumber);
  $.ajax({
    type: "GET",
    url: "ajax.php",
    data: "pageNumber=" + pageNumber,
    cache: false,
    success: function(html) {
      $("#results").html(html);
      $('#loader').html('');
    }
  });
}

$(document).ready(function() {
  // 页面加载时先读本地存储的页码，没有就用1
  const savedPage = localStorage.getItem('currentVillaPage') || 1;
  showRecords(10, savedPage);
});

如果希望用户关闭浏览器后自动清除页码记录，可以把localStorage换成sessionStorage，用法完全一样，只是会话结束后数据会自动清空。

方案二：利用History API更新URL（更优雅的方案） #

这个方法会把页码加到URL的查询参数里（比如index.php?page=4），用户跳转返回时URL里的页码还在，页面能自动加载对应内容，而且用户还可以直接分享带页码的链接。

步骤1：修改index.php的前端脚本 #

function showRecords(perPageCount, pageNumber) {
  // 更新URL的查询参数，同时添加浏览器历史记录
  const url = new URL(window.location.href);
  url.searchParams.set('page', pageNumber);
  window.history.pushState({page: pageNumber}, '', url.toString());

  $.ajax({
    type: "GET",
    url: "ajax.php",
    data: "pageNumber=" + pageNumber,
    cache: false,
    success: function(html) {
      $("#results").html(html);
      $('#loader').html('');
    }
  });
}

// 监听浏览器前进后退事件，自动加载对应页码
window.addEventListener('popstate', function(event) {
  const page = event.state?.page || 1;
  showRecords(10, page);
});

$(document).ready(function() {
  // 页面加载时读取URL里的page参数，没有就用1
  const urlParams = new URLSearchParams(window.location.search);
  const initialPage = urlParams.get('page') || 1;
  showRecords(10, initialPage);
});

步骤2：优化ajax.php的分页链接（可选） #

把内联的onclick改成数据属性，让代码更易维护：

<li><a href="javascript:void(0);" class="pages" data-page="<?php echo $i; ?>">
  <?php echo $i ?>
</a></li>

然后在index.php里添加事件委托，代替内联点击事件：

$(document).on('click', '.pages', function() {
  const page = $(this).data('page');
  showRecords(10, page);
  $('html, body').animate({
    scrollTop: $("#discountVilla").offset().top
  }, 'slow');
});

小提示 #

• 用History API的话，如果用户直接刷新带页码的页面，后端可以读取URL参数直接渲染对应内容（不过你现在用Ajax加载，前端处理也完全没问题）。
• 测试时记得用隐私窗口或者清除浏览器缓存，避免旧代码影响结果。

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