Laravel实现HTML表格分页：点击按钮切换20行数据分区

算力阿峰

2026-7-21

问题场景与疑问

我有一个customer.blade.php文件，里面包含带表头、表体、表尾的HTML <table>。现有存储客户数据的JSON文件，需要从中读取数据并展示在表体中。表格配有两个导航按钮：

<button
    class="navigation-button"
    id="navigation-button--next"
    onclick="incrementPageCounter()"
> < </button>
Page: {{$pageCounter + 1}}
<button
    class="navigation-button"
    id="navigation-button--previous"
    onclick="decrementPageCounter()"
> > </button>

需求是每页显示20行数据，点击按钮切换到下一页或上一页的20行数据，当前用以下代码实现数据切割：

@foreach(array_slice($partitionedCustomerTable[$pageCounter],0,20) as $customer)

疑问：能否仅通过PHP处理<button>标签的onclick事件，还是必须通过<script>标签发送请求？

以下是我尝试的代码：

PHP脚本

$path = storage_path("app/public/data/json/customer_sample.json");
$jsonContent = file_get_contents($path);
$customerTable = json_decode($jsonContent, true);
$partitionedCustomerTable = array_chunk($customerTable,20,false);
$customerTableLength = count($partitionedCustomerTable);
$tablePageLimit = 20;
$pageCounter = 0;

var_dump($_POST);
if (isset($_POST->action) && $_POST->action === 'next_page')
{
    $pageCounter++;
}
else if (isset($_POST->action) && $_POST->action === 'previous_page')
{
    $pageCounter--;
}
else
{
    echo("Error!");
}

内部Javascript脚本

function incrementPageCounter(pageNumber)
{
    $.ajax({
        type: "POST",
        url: "",
        data:{ action: pageNumber + 1 },
        success: function(html)
        {
           alert(html);
           pageNumber = pageNumber + 1;
        }
    });
}

function decrementPageCounter()
{
    $.ajax({
        type: "POST",
        url: "{{view('customers')}}",
        data:{ action: 'previous_page' },
        success: function(html)
        {
           alert(html);
        }
    });
}

解答

核心结论

不能仅通过PHP处理onclick事件。PHP是服务器端语言，只会在页面加载时执行一次，生成HTML后就结束运行；而onclick是浏览器触发的客户端事件，此时PHP已经完成了当前请求的处理，无法直接响应客户端的点击动作。必须通过JS发送请求（AJAX无刷新或表单提交刷新页面），让服务器重新处理并返回对应页码的数据。

错误修正与可行实现方案

方案1：刷新页面式分页（纯PHP+HTML，无需AJAX）

这种方式通过GET参数传递页码，点击按钮时刷新页面获取对应数据：

PHP逻辑（建议放在控制器，而非blade视图中）

// 控制器方法，比如CustomerController@index
public function index()
{
    $path = storage_path("app/public/data/json/customer_sample.json");
    $jsonContent = file_get_contents($path);
    $customerTable = json_decode($jsonContent, true);
    $perPage = 20;
    $partitionedCustomerTable = array_chunk($customerTable, $perPage, false);
    $totalPages = count($partitionedCustomerTable);
    
    // 获取当前页码，默认1，超出范围则修正
    $pageCounter = (int)request()->get('page', 1) - 1; // 转成数组下标
    $pageCounter = max(0, min($pageCounter, $totalPages - 1));

    $currentPageData = $partitionedCustomerTable[$pageCounter] ?? [];

    return view('customer', compact('currentPageData', 'pageCounter', 'totalPages'));
}

Blade视图中的按钮与分页逻辑

<!-- 上一页按钮 -->
<button class="navigation-button" onclick="window.location.href='{{ route('customers.index', ['page' => max(1, $pageCounter)]) }}'">
    <
</button>
Page: {{ $pageCounter + 1 }} / {{ $totalPages }}
<!-- 下一页按钮 -->
<button class="navigation-button" onclick="window.location.href='{{ route('customers.index', ['page' => min($totalPages, $pageCounter + 2)]) }}'">
    >
</button>

<!-- 表格体渲染 -->
<tbody>
    @foreach($currentPageData as $customer)
        <tr>
            <!-- 渲染客户数据，比如 -->
            <td>{{ $customer['name'] }}</td>
            <td>{{ $customer['email'] }}</td>
        </tr>
    @endforeach
</tbody>

方案2：无刷新AJAX分页（更流畅）

如果需要无刷新切换页码，修正你的AJAX代码并调整PHP逻辑：

控制器新增处理AJAX请求的方法（或复用index方法）

public function index()
{
    $path = storage_path("app/public/data/json/customer_sample.json");
    $jsonContent = file_get_contents($path);
    $customerTable = json_decode($jsonContent, true);
    $perPage = 20;
    $partitionedCustomerTable = array_chunk($customerTable, $perPage, false);
    $totalPages = count($partitionedCustomerTable);
    
    $pageCounter = (int)request()->get('page', 1) - 1;
    $pageCounter = max(0, min($pageCounter, $totalPages - 1));

    $currentPageData = $partitionedCustomerTable[$pageCounter] ?? [];

    // 判断是否为AJAX请求，返回JSON或视图
    if(request()->ajax()){
        return response()->json([
            'data' => view('customer-table-body', compact('currentPageData'))->render(),
            'currentPage' => $pageCounter + 1,
            'totalPages' => $totalPages
        ]);
    }

    return view('customer', compact('currentPageData', 'pageCounter', 'totalPages'));
}

创建customer-table-body.blade.php片段文件

@foreach($currentPageData as $customer)
    <tr>
        <td>{{ $customer['name'] }}</td>
        <td>{{ $customer['email'] }}</td>
    </tr>
@endforeach

Blade视图中的JS与按钮

<div>
    <button class="navigation-button" id="navigation-button--previous">
        <
    </button>
    <span id="page-info">Page: {{ $pageCounter + 1 }} / {{ $totalPages }}</span>
    <button class="navigation-button" id="navigation-button--next">
        >
    </button>
</div>

<table>
    <!-- 表头 -->
    <thead>
        <tr>
            <th>姓名</th>
            <th>邮箱</th>
        </tr>
    </thead>
    <!-- 表体 -->
    <tbody id="customer-table-body">
        @include('customer-table-body')
    </tbody>
    <!-- 表尾 -->
</table>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    let currentPage = {{ $pageCounter + 1 }};
    const totalPages = {{ $totalPages }};

    // 下一页按钮事件
    $('#navigation-button--next').click(function(){
        if(currentPage >= totalPages) return;
        loadPage(currentPage + 1);
    });

    // 上一页按钮事件
    $('#navigation-button--previous').click(function(){
        if(currentPage <= 1) return;
        loadPage(currentPage - 1);
    });

    // 加载指定页码数据
    function loadPage(page){
        $.ajax({
            type: "GET",
            url: "{{ route('customers.index') }}",
            data: { page: page },
            success: function(response){
                $('#customer-table-body').html(response.data);
                $('#page-info').text(`Page: ${response.currentPage} / ${response.totalPages}`);
                currentPage = response.currentPage;
            }
        });
    }
</script>

你的尝试代码中的错误点

PHP中$_POST->action写法错误，应该用$_POST['action']（或Laravel的request()->input('action')），且用POST传递动作不如直接传递页码更直观。
JS中incrementPageCounter方法的参数pageNumber没有传入，且AJAX的URL为空或错误，{{view('customers')}}会返回视图内容而非路由地址，应该用{{ route('customers.index') }}。
没有处理页码的边界（比如不能小于1或大于总页数），也没有保持页码状态（刷新后会回到第一页）。

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

Laravel实现HTML表格分页：点击按钮切换20行数据分区

PHP脚本 #

内部Javascript脚本 #

核心结论 #

错误修正与可行实现方案 #