Laravel：如何按指定页码导航至对应表格内容？

原代码的核心问题 #

1. GET请求参数传递错误：GET请求不能通过send()传递参数，参数需放在URL的查询字符串中；同时混用XHR和axios两种请求方式，逻辑混乱。
2. axios使用错误：前端浏览器环境无法使用Node.js的require('axios')，需通过CDN引入或打包工具引入后直接调用。
3. 未处理请求响应：发送请求后既没更新页面内容，也没做页面跳转，导致看不到分页变化。
4. 后端未接收分页参数：控制器未处理page参数，无法返回对应页码的数据。

分步解决方案 #

1. 后端路由与控制器处理

首先在routes/web.php定义路由：

Route::get('/customers', [CustomerController::class, 'index']);

在CustomerController中处理分页逻辑，用Laravel自带的分页工具更高效：

namespace App\Http\Controllers;

use App\Models\Customer;
use Illuminate\Http\Request;

class CustomerController extends Controller
{
    public function index(Request $request)
    {
        // 获取当前页码，默认值为1
        $pageNumber = $request->query('page', 1);
        // 每页返回20条数据，Laravel自动处理分页边界
        $customers = Customer::paginate(20, ['*'], 'page', $pageNumber);
        
        return view('customers', compact('customers', 'pageNumber'));
    }
}

2. 前端视图修正

提供两种实现方式，按需选择：

方式一：页面刷新式分页（最简单）

直接通过跳转URL带参数实现分页，无需JS请求：

@section('content')
    <table>
        <!-- 渲染表格数据 -->
        @foreach($customers as $customer)
            <tr>
                <td>{{ $customer->id }}</td>
                <td>{{ $customer->name }}</td>
                <!-- 其他字段按需添加 -->
            </tr>
        @endforeach
    </table>

    <!-- 分页按钮 -->
    <button class="navigation-button" onclick="window.location.href='{{ url("/customers?page=" . max(1, $pageNumber - 1)) }}'">
        <
    </button>
    Page: {{ $pageNumber }}
    <button class="navigation-button" onclick="window.location.href='{{ url("/customers?page=" . ($pageNumber + 1)) }}'">
        >
    </button>
@endsection

方式二：AJAX无刷新分页

如果需要无刷新更新表格，先在视图头部引入axios：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

然后修改视图结构与JS逻辑：

@section('content')
    <!-- 表格容器，用于替换内容 -->
    <div id="customers-table">
        @include('partials.customers_table', ['customers' => $customers])
    </div>

    <!-- 分页按钮 -->
    <button class="navigation-button" onclick="changePage({{ $pageNumber - 1 }})">
        <
    </button>
    Page: <span id="current-page">{{ $pageNumber }}</span>
    <button class="navigation-button" onclick="changePage({{ $pageNumber + 1 }})">
        >
    </button>

    <script>
        function changePage(page) {
            // 页码不能小于1
            if (page < 1) return;
            
            axios.get('{{ url("/customers") }}', {
                params: { page: page }
            }).then(response => {
                // 替换表格内容
                document.getElementById('customers-table').innerHTML = response.data;
                // 更新页码显示
                document.getElementById('current-page').textContent = page;
            }).catch(error => {
                console.error('分页请求失败:', error);
            });
        }
    </script>
@endsection

同时调整控制器，支持AJAX请求返回表格片段：

public function index(Request $request)
{
    $pageNumber = $request->query('page', 1);
    $customers = Customer::paginate(20, ['*'], 'page', $pageNumber);
    
    if ($request->ajax()) {
        return view('partials.customers_table', compact('customers'));
    }
    
    return view('customers', compact('customers', 'pageNumber'));
}

创建表格片段文件resources/views/partials/customers_table.blade.php：

<table>
    @foreach($customers as $customer)
        <tr>
            <td>{{ $customer->id }}</td>
            <td>{{ $customer->name }}</td>
            <!-- 其他字段按需添加 -->
        </tr>
    @endforeach
</table>

关键注意点 #

• 不要同时混用XHR和axios，选一种方式即可
• Laravel的paginate()会自动处理分页边界（比如第一页不能再往前翻），比手动计算更可靠
• 使用url()辅助函数生成跳转链接，避免硬编码域名，适配不同部署环境

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