Backpack 4.1自定义分页疑问：添加页码跳转搜索框

功能支持情况 #

Backpack 4.1没有内置直接输入页码跳转的分页功能，但可以通过自定义视图的方式实现，且不需要修改vendor目录下的文件（避免依赖包更新时覆盖修改内容）。

实现步骤 #

1. 覆写Backpack的分页视图 #

Backpack的分页组件视图位于vendor/backpack/crud/src/resources/views/crud/inc/pagination.blade.php，将该文件复制到项目的resources/views/vendor/backpack/crud/inc/目录下（如果对应目录不存在，手动创建层级即可）。

Laravel会优先加载resources/views/vendor/下的自定义视图，既保留了Backpack原有分页逻辑，又能安全添加自定义功能。

2. 修改自定义分页视图，添加页码跳转功能 #

打开复制后的pagination.blade.php，在分页按钮区域的合适位置（比如分页列表末尾）添加页码输入框和跳转逻辑。示例代码如下：

<!-- 在原分页<ul>标签之后添加 -->
<div class="d-inline-block align-middle ml-3">
    <div class="input-group input-group-sm">
        <input type="number" 
               class="form-control" 
               id="jump-page-input" 
               placeholder="输入页码" 
               min="1" 
               max="{{ $entries->lastPage() }}"
               style="width: 100px;">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary" id="jump-page-btn">跳转</button>
        </div>
    </div>
</div>

<script>
// 绑定回车事件和按钮点击事件
const input = document.getElementById('jump-page-input');
const btn = document.getElementById('jump-page-btn');
const maxPage = {{ $entries->lastPage() }};

input.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        handleJump();
    }
});
btn.addEventListener('click', handleJump);

function handleJump() {
    const targetPage = parseInt(input.value);
    if (targetPage >= 1 && targetPage <= maxPage) {
        // 修改URL中的page参数并跳转
        const url = new URL(window.location.href);
        url.searchParams.set('page', targetPage);
        window.location.href = url.toString();
    } else {
        alert(`请输入1到${maxPage}之间的有效页码`);
        input.value = '';
    }
}
</script>

3. 样式调整（可选） #

如果需要让输入框和分页按钮风格更统一，可以根据项目UI规范调整CSS样式，比如微调间距、对齐方式等。

注意事项 #

• 禁止直接修改vendor目录下的文件，否则执行composer update时修改内容会被完全覆盖。
• 代码中通过$entries->lastPage()获取总页数，确保输入的页码不会超出合法范围。

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