Laravel中使用Bootstrap与onEachSide实现分页时添加筛选按钮的技术咨询

你提到的需求是完全可行的！默认情况下，Laravel的links()方法会输出包含完整<nav>和<ul.pagination>的结构，所以要在<ul>之后添加筛选内容，我们需要调整分页的渲染方式，下面提供两种常用的解决方案：

方案一：自定义Bootstrap分页视图（推荐） #

这是最灵活的方式，直接修改分页的视图结构，把筛选内容嵌入到同一个<nav>标签内：

1. 发布默认的分页视图
   首先把Laravel自带的Bootstrap分页视图发布到你的项目中，这样你可以自定义它：

   php artisan vendor:publish --tag=laravel-pagination
   

   执行后，你会在resources/views/vendor/pagination目录下看到bootstrap.blade.php（对应Bootstrap 5）或bootstrap-4.blade.php文件。

2. 修改视图添加筛选内容
   打开这个视图文件，找到<ul class="pagination">...</ul>部分，在它的后面添加你的筛选按钮/控件。比如：

   {{-- 原有的ul.pagination部分 --}}
   <ul class="pagination">
     {{-- 分页逻辑代码 --}}
   </ul>
   
   {{-- 添加筛选内容，用Bootstrap的布局类对齐 --}}
   <div class="ms-3 d-flex align-items-center">
     <button class="btn btn-sm btn-outline-primary" type="button" data-bs-toggle="modal" data-bs-target="#filterModal">
       筛选客户
     </button>
     <button class="btn btn-sm btn-outline-secondary ms-2">重置筛选</button>
   </div>
   

   可以根据你的需求调整布局类（比如d-flex、align-items-center来和分页栏垂直对齐）。

3. 使用自定义视图渲染分页
   之后在你的 blade 模板中，仍然用原来的方式调用分页，Laravel会自动使用你修改后的视图：

   {{ $clients->onEachSide(5)->links() }}
   

   如果你的项目用的是Bootstrap 4，可以明确指定视图：

   {{ $clients->onEachSide(5)->links('vendor.pagination.bootstrap-4') }}
   

方案二：手动构建Nav容器 #

如果你不想修改默认的分页视图，可以自己手动创建<nav>标签，把分页的<ul>和筛选内容放在一起：

<nav class="d-flex justify-content-between align-items-center">
  {{-- 渲染分页的ul部分 --}}
  {!! $clients->onEachSide(5)->links('pagination::bootstrap-5', ['wrapper' => false]) !!}

  {{-- 筛选按钮区域 --}}
  <div class="d-flex gap-2">
    <button class="btn btn-sm btn-primary">高级筛选</button>
    <button class="btn btn-sm btn-outline-secondary">重置</button>
  </div>
</nav>

这里的关键是传递['wrapper' => false]参数给links()方法（需要确保你的分页视图支持这个参数，如果是发布后的视图，你可以在视图里添加逻辑：比如如果$wrapper为false，就只输出<ul>而不包含<nav>）。如果默认视图不支持，你可以直接复制默认视图里的<ul>部分代码到模板中，手动渲染分页链接。

注意事项 #

• 确保筛选按钮的样式和Bootstrap分页组件的风格一致，使用合适的Bootstrap类（比如btn-sm和分页按钮的大小匹配）。
• 如果你的筛选涉及表单提交，建议用模态框承载筛选表单，避免分页栏过于拥挤。

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