分页页面如何阻止JS自动加载导致订单数据回退至首页？

这个问题其实很好理解——你每次调用{{ route('autoload') }}时都没传递当前的分页页码参数，后端自然每次都返回第一页的订单数据，刷新后就自动跳回去了。咱们一步步来修复：

第一步：修改后端，支持接收分页参数 #

先调整OrdersController里的autoloadOrders方法，让它能获取当前页码（默认值设为1），然后返回对应页的未交付订单：

public function autoloadOrders(Orders $orders)
{
    // 从请求中获取页码，默认显示第一页
    $currentPage = request()->get('page', 1);
    // 假设getUndeliveredOrders返回查询构造器，调用paginate并指定当前页码
    $paginatedOrders = $orders->getUndeliveredOrders()->paginate(15, ['*'], 'page', $currentPage);
    
    return view('admin.partials.autoload')->with(['orders' => $paginatedOrders]);
}

小提示：如果你的getUndeliveredOrders已经返回分页集合，直接把$currentPage传入对应分页方法即可；如果是查询构造器，按上面的写法用paginate指定页码参数就好。

第二步：前端跟踪分页页码，刷新时携带参数 #

接下来修改welcome.blade.php里的JavaScript逻辑，让它记住当前选中的页码，每次定时刷新时把参数传给后端：

<script>
$(document).ready(function() {
    // 初始化当前页码：从URL的query参数提取，默认1
    let currentPage = new URLSearchParams(window.location.search).get('page') || 1;

    // 监听分页链接点击，更新当前页码并手动加载对应页数据
    $(document).on('click', '.pagination a', function(e) {
        e.preventDefault();
        // 从分页链接的href里解析出page参数
        const linkUrl = new URL($(this).attr('href'));
        currentPage = linkUrl.searchParams.get('page') || 1;
        // 加载对应页的表格
        $('#autoload').load(`{{ route('autoload') }}?page=${currentPage}`);
        // 更新浏览器URL的query参数，保持页面状态一致
        window.history.pushState({}, '', `?page=${currentPage}`);
    });

    // 定时刷新表格，携带当前页码参数
    setInterval(function() {
        $('#autoload').load(`{{ route('autoload') }}?page=${currentPage}`);
    }, 2000);
});
</script>

第三步：确认局部视图逻辑一致 #

你的autoload.blade.php里的表格渲染逻辑和主页面完全匹配，这部分不需要修改，保持原样即可。

修复原理说明 #

• 后端现在会根据传入的page参数返回对应页的数据，不再固定返回第一页
• 前端通过监听分页链接点击事件，实时更新当前页码，并且在定时刷新时把这个参数传递给后端
• 用pushState更新浏览器URL的query参数，保证用户刷新整个页面时也能回到当前分页位置

这样修改后，不管你切换到哪一页，定时刷新都会加载当前页的最新订单数据，再也不会自动跳回第一页啦！

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