在开发 Web 应用程序中，表格的分页是非常常见的功能，特别是当表格中包含大量数据时。Next.js 是一个流行的 React 框架，它可以帮助我们快速开发 Web 应用程序。在本文中，我将介绍如何使用 Next.js 实现表格分页功能。让我们开始吧！
准备工作
首先要安装 next, react, react-dom 和 axios 。安装过程可以使用 npm，也可以使用 yarn。
--- ------- ---- ----- --------- -----
实现分页功能
准备数据
我们需要一些数据来演示分页。为此，您可以使用一个假的 API，也可以使用本地的 JSON 文件。在这个例子中，我们使用了本地的 JSON 文件。
-
-
----- --
------- ----- -----
-------- ----------------------
--
-
----- --
------- ----- -----
-------- ----------------------
--
-
----- --
------- ---- -------
-------- -----------------------
--
-
----- --
------- ---- -------
-------- -----------------------
--
-
----- --
------- ---- ---------
-------- -------------------------
--
-
----- --
------- ---- -------
-------- -----------------------
--
-
----- --
------- ----- -----
-------- ----------------------
--
-
----- --
------- ------ -------
-------- -------------------------
--
-
----- --
------- ----- ------
-------- -----------------------
--
-
----- ---
------- ------ ------
-------- ------------------------
--
-
----- ---
------- ----- -------
-------- ------------------------
--
-
----- ---
------- ----- -------
-------- ------------------------
-
-创建页面
首先，我们需要创建一个页面来显示分页的表格。在 Next.js 中，我们可以在 pages 文件夹中创建一个名为 index.js 的文件。
在 index.js 中，我们需要引入 React 和一些其他的组件。
------ ----- ---- ------- ------ ----- ---- --------------------- ------ ---------- ---- --------------------------
接下来，我们需要定义一个 React 组件来呈现表格和分页。
----- --------- - -- -- -
----- ------ -------- - ------------------ -- ----
----- --------- ----------- - --------------------- -- ------
----- ------------- --------------- - ----------------- -- ----
----- -------------- - ----------------- -- -----
-- --------
----- ------- - ----- -- -- -
----------------
----- -------- - ----- ------------------
----- ---- - ----- ---------------
-------------
-----------------
-
------------------ -- -
---------
-- ---
-- -----
----- ---------- - -----------
----- ---------- - -------------------- - -------------
-- --------
----- --------------- - ----------- - ------------
----- ---------------- - --------------- - ------------
----- ------------ - ---------------------------- ----------------
-- ------
----- ----------- - ------- ----------- -- -
----------------------
--------------------------
-
-- -------
------ -
-----
------ -------------------- ----------------- --
--- --
-----------
---------------------------
-----------------------
-------------------------
-----------------------
-------------------------
--
------
-
-
------ ------- ---------在 IndexPage 组件中，我们使用 React.useState 来创建一些状态变量。我们使用 useEffect 这个 React Hook 在组件渲染时获取了数据。
我们还定义了一些计算变量。totalItems 是表格中的总记录数。totalPages 是总页数。currentItems 是当前页码的数据。handleClick 是用于更改当前页的函数。
最后，我们渲染 Table 和 Pagination 组件。
创建表格
接下来，我们需要创建显示表格的组件。我们将表格组件放在 components 文件夹中的一个名为 Table.js 的文件中。
我们使用了 react-bootstrap 包来创建表格组件。
------ ----- ---- -------
------ ----- ---- -----------------------
------ ------- ---- -------------------------
----- -------------- - -- ------ ------- -- -- -
-- ------
----- --------------- - -- -- -
------ -------------- -- -
----- - --- ----- ----- - - ----
------ -
--- ---------
-------------
---------------
----------------
-----
-
--
-
-- ----------
------ -
-----
-------- - -
-------- ------------------ --------------
----- -------------------------------------
----------
- - -
------ ------- -------- ------
-------
----
----------
-------------
--------------
-----
--------
----------------------------------
--------
--
------
-
-
------ ------- --------------在 TableComponent 组件中，我们使用 React.useState 来创建一个状态变量。如果 loading 是 true，将显示加载状态，否则将显示表格组件。我们也定义了一个函数 renderTableData 来渲染表格中的数据。
创建分页
最后，我们需要创建显示分页的组件。我们将分页组件放在 components 文件夹中的一个名为 Pagination.js 的文件中。
我们使用了 react-bootstrap 包来创建分页组件。
------ ----- ---- -------
------ ---------- ---- ----------------------------
----- ------------------- - -- ------------- ----------- ------------ ----------- ----------- -- -- -
-- ----------
----- ----------- - --
--- ---- - - -- - -- ----------- ---- -
-----------------
---------------- ------- --------- --- ------------ -------------- -- ------------------ ----
---
------------------
-
-
-- ------
------ -
------------
---------------- --------------------- --- -- -------------- -- ------------------ ----------- - --- --
-------------
---------------- --------------------- --- ----------- -------------- -- ------------------ ----------- - --- --
-------------
-
-
------ ------- -------------------在 PaginationComponent 组件中，我们使用 React.useState 来创建一个状态变量。我们使用 for 循环来创建页码。我们还定义了一个函数 handleClick 来处理页码更改事件。最后，我们渲染 Pagination 组件。
创建 API 路由
最后，我们需要创建一个 Next.js API 路由来提供数据。我们将 API 路由放在 pages/api 文件夹中的一个名为 data.js 的文件中。
------ ---- ---- ----------------- ------ ------- ----- ---- -- - -------------- - --- -------------- -
在 data.js 中，我们导入 data.json 文件，并定义一个默认的函数来处理请求。该函数将数据作为 JSON 对象返回。
结论
到这里，我们就完成了在 Next.js 中使用表格分页的实现。我们创建了一个页面来显示表格和分页，创建了一个组件来显示表格，创建了一个组件来显示分页，创建了一个 API 路由来提供数据。我希望这篇文章能够给您提供足够的信息来开始使用 Next.js 和表格分页功能。如果您有任何问题或建议，请随时发表留言。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67107d4c5f551281026b8544