Laravel怎样实现分页数据展示_Laravel实现分页数据展示方法【UI】-php教程-PHP中文网

Laravel分页有五种方法：一、Eloquent的paginate()；二、查询构造器的paginate()；三、手动用LengthAwarePaginator分页；四、自定义分页视图；五、AJAX分页动态更新。

laravel怎样实现分页数据展示_laravel实现分页数据展示方法【ui】

如果您在Laravel项目中需要将大量数据分批次展示在前端页面上，则必须借助分页机制来避免一次性加载全部记录导致性能下降或页面卡顿。以下是实现分页数据展示的多种方法：

一、使用Eloquent模型的paginate()方法

该方法是最常用且最简洁的方式，它会自动处理数据库查询、分页参数解析、URL生成及分页器实例构建，适用于大多数列表场景。

1、在控制器中调用模型的paginate()方法，并传入每页显示条数，例如每页15条：
```php
$users = User::paginate(15);
```

2、将分页数据传递给视图：
```php
return view('users.index', ['users' => $users]);
```

3、在Blade模板中使用@each或循环遍历数据，并调用links()方法渲染分页导航：
```blade
@foreach($users as $user)
{{ $user->name }}
@endforeach
{{ $users->links() }}
```

二、使用查询构造器的paginate()方法

当查询逻辑较复杂、无法直接通过Eloquent模型表达时，可使用DB门面配合查询构造器进行分页，其返回结构与Eloquent分页器一致。

1、在控制器中使用DB::table()构建查询并调用paginate()：
```php
$posts = DB::table('posts')
  ->where('status', 1)
  ->orderBy('created_at', 'desc')
  ->paginate(10);
```

2、将结果传递至视图，语法与Eloquent方式完全相同。

3、在Blade中直接使用{{$posts->links()}}渲染分页控件，无需额外适配。

三、手动构造分页器（LengthAwarePaginator）

适用于已存在数组数据或需从第三方API获取原始数据后进行分页的情形，此时数据库层面无法介入分页计算，需手动切片并注入分页元信息。

1、先获取全部数据（注意控制总量，避免内存溢出）：
```php
$allData = SomeService::fetchFromApi();
```

2、计算当前页码和偏移量：
```php
$page = request()->input('page', 1);
$perPage = 8;
$offset = ($page - 1) * $perPage;
```

3、对数组进行切片并创建LengthAwarePaginator实例：
```php
$pagedData = array_slice($allData, $offset, $perPage);
$paginator = new LengthAwarePaginator(
  $pagedData,
  count($allData),
  $perPage,
  $page,
  ['path' => request()->url(), 'query' => request()->query()]
);
```

4、将$paginator对象传入视图，调用{{$paginator->links()}}即可正常渲染UI。

四、自定义分页视图以匹配UI设计规范

默认的Bootstrap风格分页HTML可能不符合项目UI要求，可通过发布并修改分页视图文件实现样式定制。

1、执行Artisan命令发布分页视图：
```bash
php artisan vendor:publish --tag=laravel-pagination
```

2、在resources/views/vendor/pagination目录下找到bootstrap-5.blade.php（或其他对应版本），按设计稿调整HTML结构与CSS类名。

3、在Blade模板中指定使用的分页视图：
```blade
{{ $users->links('pagination::tailwind') }}
```

4、若使用Tailwind CSS，可将bootstrap-5.blade.php重命名为tailwind.blade.php，并确保路径引用正确；注意：自定义视图文件名必须与links()方法中传入的参数严格一致。

五、AJAX分页并动态更新内容区域

为提升用户体验，避免整页刷新，可结合JavaScript监听分页链接点击事件，通过异步请求获取新页数据并替换DOM节点。

1、在Blade中为分页链接添加data属性标识容器ID：
```blade
{{ $items->links('pagination::bootstrap-5', ['data_container' => 'content-list']) }}
```

2、编写JavaScript监听a标签点击，阻止默认跳转行为：
```js
document.addEventListener('click', function(e) {
  if (e.target.tagName === 'A' && e.target.getAttribute('href')?.includes('page=')) {
    e.preventDefault();
    loadPage(e.target.getAttribute('href'));
  }
});
```

3、定义loadPage函数发起GET请求，接收JSON格式响应（需后端返回HTML片段或结构化数据）：
```js
function loadPage(url) {
  fetch(url)
    .then(res => res.json())
    .then(data => {
      document.getElementById('content-list').innerHTML = data.html;
    });
}
```

4、后端控制器需判断是否为AJAX请求，返回JSON而非视图：
```php
if (request()->expectsJson()) {
return response()->json(['html' => view('partials.item-list', compact('items'))->render()]);
}
```