如何结合Laravel SSR paginate方法控制PrimeVue DataTable分页按钮？

一、基础控制：利用PrimeVue内置属性 + Laravel分页状态 #

Laravel的paginate()方法返回的分页实例，会自动包含on_first_page（是否为第一页）、has_more_pages（是否有下一页）等状态字段，这些字段会被序列化后传递给前端。你可以直接通过这些字段控制PrimeVue DataTable的分页按钮禁用状态：

修改你的DataTable代码，添加prev-disabled和next-disabled属性：

<DataTable
    v-if="!isCreating"
    paginator
    :rows="10"
    v-model:editingRows="editingRows"
    v-model:selection="selectedProducts"
    :value="props.tax_payer_categories.data"
    :total-records="props.tax_payer_categories.total"
    editMode="row"
    paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
    @row-edit-save="onRowEditSave"
    dataKey="id"
    striped-rows
    table-class="p-10"
    <!-- 新增：控制上一页/下一页按钮禁用状态 -->
    :prev-disabled="props.tax_payer_categories.on_first_page"
    :next-disabled="!props.tax_payer_categories.has_more_pages"
    :pt="{
        table: { style: 'min-width: 50rem' },
        column: {
            bodycell: () => ({
                style: 'padding-top: 1rem; padding-bottom: 0.6rem; place-content: flex-start;',
            }),
        },
    }"
>

这样当表格处于第一页时，上一页按钮会自动禁用；处于最后一页时，下一页按钮自动禁用。

二、高级控制：自定义分页按钮（灵活控制样式/逻辑） #

如果需要更灵活的控制（比如自定义按钮文案、样式，或者自定义分页跳转逻辑），可以隐藏默认分页器，自己实现分页控件：

1. 前端代码（自定义分页按钮）

<DataTable
    ref="dataTable"
    v-if="!isCreating"
    :rows="10"
    v-model:editingRows="editingRows"
    v-model:selection="selectedProducts"
    :value="props.tax_payer_categories.data"
    :total-records="props.tax_payer_categories.total"
    editMode="row"
    @row-edit-save="onRowEditSave"
    dataKey="id"
    striped-rows
    table-class="p-10"
    :pt="{
        table: { style: 'min-width: 50rem' },
        column: {
            bodycell: () => ({
                style: 'padding-top: 1rem; padding-bottom: 0.6rem; place-content: flex-start;',
            }),
        },
    }"
>
<!-- 你的列定义 -->
</DataTable>

<!-- 自定义分页控件 -->
<div class="flex justify-center items-center gap-2 mt-4">
    <button 
        @click="$refs.dataTable.changePage(0)" 
        :disabled="props.tax_payer_categories.on_first_page"
        class="px-3 py-1 rounded border"
    >
        第一页
    </button>
    <button 
        @click="$refs.dataTable.changePage(props.tax_payer_categories.current_page - 2)" 
        :disabled="props.tax_payer_categories.on_first_page"
        class="px-3 py-1 rounded border"
    >
        上一页
    </button>
    <span>第 {{ props.tax_payer_categories.current_page }} / {{ props.tax_payer_categories.last_page }} 页</span>
    <button 
        @click="$refs.dataTable.changePage(props.tax_payer_categories.current_page)" 
        :disabled="!props.tax_payer_categories.has_more_pages"
        class="px-3 py-1 rounded border"
    >
        下一页
    </button>
    <button 
        @click="$refs.dataTable.changePage(props.tax_payer_categories.last_page - 1)" 
        :disabled="props.tax_payer_categories.current_page === props.tax_payer_categories.last_page"
        class="px-3 py-1 rounded border"
    >
        最后一页
    </button>
</div>

注意：PrimeVue的changePage方法接收的是从0开始的页码索引，所以需要做页码转换（比如Laravel返回的current_page从1开始，对应索引为current_page - 1）。

2. 后端代码（处理分页参数）

为了支持SSR下的分页数据更新，需要在Laravel控制器中接收page查询参数，并保留其他查询条件：

use Illuminate\Http\Request;

public function index(Request $request)
{
    return Inertia::render('TaxPayerCategory/Index', [
                'tax_payer_categories' => TaxPayerCategory::paginate(10)->appends($request->query())
    ]);
}

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