如何制作 Laravel 分页组件?

问题描述

我有一个带有后退和前进按钮的滑块组件,我想以分页方式获取数据,我该怎么做? 我只想在不使用 Vue.js 或 livewire 的情况下做到这一点,只使用 laravel、JS 和 JQuery。

解决方法

首先,为什么要使用滑块来创建分页?有更好的方法,如延迟加载、过滤列和简单分页。我猜延迟加载最能提高性能。

如果你坚持要创建一个滑块组件,只是想知道,你有多少数据?以及您要检索多少数据以显示屏幕?想象一下,您的数据库中有超过 1.000.000 行,您肯定不想查询它们以实时更新您的屏幕。为什么我告诉你“全部查询”?

让我告诉你,如果你使用laravel默认分页(使用limit和offset)进行分页,这背后的流程是这样的:

  1. DB 将选择您拥有的所有行
  2. DB 将根据限制参数限制您的行
  3. DB 将逐行扫描以匹配您想要的偏移量
  4. DB 将检索您想要的数据

在这种流程中,如果您有大量数据,这就是为什么分页(限制和偏移)不够好的原因。解决方案是将您的分页逻辑从限制和偏移更改为这样的查询(案例:自动增量 ID):

SELECT
    *
FROM
    payments
WHERE
  Id > 15
LIMIT 20

或者对于降序方法,您可以这样查询:

SELECT
    *
FROM
    payments
WHERE
  Id < 50
ORDER BY Id DESC
LIMIT 20

然后在 Laravel 中,发送一个包含分页数据的 json。因此,在 javascript 中,您只需要将分页数据与库或您自己的分页逻辑对齐即可。

,

Laravel 的查询构建器提供了一个 paginate 方法,该方法为您提供一个 LengthAwarePaginator。通常,您会使用 $items->links() 在刀片视图中呈现它,但您可以将其结果转换为 JSON (https://laravel.com/docs/8.x/pagination#converting-results-to-json)。这样您就可以随心所欲地在 JavaScript 中使用结果。