在Web开发中，前端页面中经常需要使用到分页功能，而material-ui_pagination就是一个提供了分页组件的npm包。本文将介绍如何在项目中使用material-ui_pagination。
安装
在使用material-ui_pagination之前，需要先安装npm包并添加组件依赖，打开终端输入以下命令：
npm install @material-ui/core npm install material-ui_pagination
基本使用
material-ui_pagination提供了两种分页组件：基本分页和带输入框分页。这里我们分别介绍一下他们的用法。
基本分页
首先导入Pagination组件，再在需要分页的地方将Pagination组件直接添加到页面即可。例如：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ---------- ---- -------------------------
----- --- ------- --------- -
-------- -
------ -
-----
--------------
-----------
----------
----------
-----------
----------------------- -- ----------------------
--
------
-
-
-
------ ------- ----在上述代码中，Pagination组件需要传入以下参数：limit（每页数量）、offset（当前页码）、total（总数量）、onClickItem（点击页码的回调函数）。其中，onClickItem函数会返回当前选中的页码。
带输入框分页
与基本分页类似，我们需要先导入PaginationInput组件再添加到页面中即可。例如：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ --------------- ---- -----------------------------------------
------ ---------- ---- -------------------------
----- --- ------- --------- -
------------------ -
-------------
---------- - -
------ ---
------- --
------ -
--
---------------------- - ----------------------------------
--------------------- - ---------------------------------
-
------------------- -
---------------
------ ---
---
-
------------------------ -
---------------
------ ------
------- -
---
-
---------------------- -
---------------
------- ----- - -- - ----------------
---
-
-------- -
----- - ------ ------- ----- - - -----------
------ -
-----
----------------
----------------
-------------
-------------
--------------------------------------
--
-----------
-------------
---------------
-------------
-----------------------------------
--
------
-
-
-
------ ------- ----在上述代码中，我们还需要额外传入以下参数：maxLimit（最大每页数量）、onChangeLimit（改变每页数量的回调函数）。
总结
material-ui_pagination提供了简单易用的分页组件，可以快速的让我们在项目中实现分页功能，从而提高用户体验。希望这篇文章能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1281e8991b448daa92