Laravel 9中如何获取分页器所有页面的全部数据？

问题根源 #

你当前的做法是将当前页的分页实例通过表单隐藏域传递到后端，但paginate(2)方法本身仅会查询并返回当前页的2条数据，而非所有符合条件的记录。因此提交表单后，后端只能拿到第一页的内容，无法对全部数据进行排序。

解决方案 #

方案一：后端重新查询排序（推荐，适配所有数据量） #

核心思路：不在前端传递分页数据，仅传递排序规则（字段+方向），后端根据规则重新查询所有符合条件的数据，再进行分页。

1. 修改Blade视图表单
   只传递排序字段和方向，移除分页实例的隐藏输入框：

<form method="POST" action="{{ route('events.sort') }}">
    @csrf
    <!-- 传递排序字段和方向 -->
    <input type="hidden" name="sort_by" value="startingAt">
    <input type="hidden" name="sort_dir" value="asc">
    <button type="submit">按开始时间升序排序</button>
</form>

2. 控制器排序方法实现
   根据前端传递的排序参数，重新执行查询并排序：

use Illuminate\Http\Request;
use Carbon\Carbon;
use App\Models\Event;

public function sort(Request $request)
{
    // 设置默认排序规则，避免参数缺失报错
    $sortBy = $request->input('sort_by', 'startingAt');
    $sortDir = $request->input('sort_dir', 'asc');

    // 先排序，再分页，确保所有符合条件的数据都参与排序
    $events = Event::where('endingAt', '>', Carbon::now('GMT+1'))
        ->orderBy($sortBy, $sortDir)
        ->paginate(2);

    return view('events.index', compact('events'));
}

方案二：前端本地排序（仅适用于小数据量场景） #

如果数据总量不大（比如几十条），可以一次性获取所有数据到前端，用JavaScript实现本地排序，无需后端交互：

1. 控制器获取全部数据

$events = Event::where('endingAt', '>', Carbon::now('GMT+1'))->get();

2. 前端JS实现排序

<div id="event-list"></div>

<!-- 排序按钮 -->
<button onclick="sortEvents('startingAt', 'asc')">按开始时间升序</button>
<button onclick="sortEvents('endingAt', 'desc')">按结束时间降序</button>

<script>
    // 将PHP数据转为JS数组
    const allEvents = @json($events);
    let currentEvents = [...allEvents];

    // 排序逻辑
    function sortEvents(sortBy, sortDir) {
        currentEvents.sort((a, b) => {
            if (a[sortBy] < b[sortBy]) return sortDir === 'asc' ? -1 : 1;
            if (a[sortBy] > b[sortBy]) return sortDir === 'asc' ? 1 : -1;
            return 0;
        });
        renderEvents(currentEvents);
    }

    // 渲染事件列表
    function renderEvents(events) {
        const listEl = document.getElementById('event-list');
        listEl.innerHTML = '';
        events.forEach(event => {
            const item = document.createElement('div');
            item.innerHTML = `
                <h3>${event.title}</h3>
                <p>开始时间：${event.startingAt}</p>
                <p>结束时间：${event.endingAt}</p>
            `;
            listEl.appendChild(item);
        });
    }

    // 初始渲染
    renderEvents(currentEvents);
</script>

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