跳到内容
保持联系
印度班加罗尔
[电子邮件 protected]
电话:+91 8919786847
工作查询
[电子邮件 protected]
电话:+91 8919786847
9分钟阅读

反应分页:这里’s How to Use It

  1. 反应 .js
  2. 反应分页:这里’s How to Use It

什么是反应分页?

在现代世界中有一种反应分页的概念。在这个世界上,我们将文档分为电子页面/离散页面。现在,这些在网络浏览器上呈现的页面称为网页。而且,应该被渲染的内容与这些页面中的这些页面彼此关联。所以他们使用reactjs分页。 反应 .js 分页库可直接用于任何项目列表的分页功能。这里必要的道具是要渲染的列表项的范围。它还具有一个回调函数onChange,该函数将页面更改通知主要组件。当前页面的默认值为1,要显示的页面范围为5,每页项目为10。

反应分页告诉我们什么?

分页在仅过滤和筛选相关数据方面具有其自身的意义。 Google搜索引擎就是一个例子。因此,当用户正在寻找特定信息而不吸收任何随机信息时,reactjs分页就变得至关重要。有大量的集成库可用于管理分页。在Web开发中,尤其是在React方面,也可以访问大量资源。这样您就可以使用笔直来保持应用程序的分页。

 

我们在哪里可以使用React分页?

这是非常容易使用。只需提供您要在页面上展示的东西总数的道具即可。

进口  React, { Component }  “react”;

进口  ReactDOM  “react-dom”;

进口  Pagination  “react-js-pagination”;

要求(“引导程序/较少/引导程序。减”);

 

类   应用程式  extends Component {

构造函数(道具){

超级(道具);

这个状态  = {

活动页面 : 15

};

}

 

handlePageChange(pageNumber){

console.log(`活动页面是$ {pageNumber}`);

this.setState({activePage: pageNumber});

}

 

render(){

返回  (

< div >

< 分页

活动页面 ={this.state.activePage}

itemsCountPerPage={10}

totalItemsCount={450}

pageRangeDisplayed={5}

onChange ={this.handlePageChange.bind(this)}

/>

</ div >

);

}

} co(coutesy-www.npmjs.com)

 

分页– A easy way

在线上有很多参考资料,可以对ReactJs中的分页提供不错的见解。此外,您还可以轻松使用NPM软件包。现在,我们非常感谢您的材料,并热爱使用这些软件包。尽管他们主要是比较随意,但首先要在页面上加载整个数据集。之后,您可以完全管理前端的分页。我们将以在页面上加载所需的确切数据的概念来处理本文。然后,当用户单击分页号显示时,根据请求手动下载数据集。

分页Data Format

在许多情况下,当您创建对任何返回分页数据的端点的API调用时,您至少需要用URL超出页码;因此,示例网址如下所示:

//reqres.in/api/users?page=2

 

(courtesy-//medium.com)

上方网址中最需要注意的是“ page = 2where 2”。这是我们要获取的页码数据集。它可以是后端中数据集的3,4或任意数量。

响应将不断包含三个重要数据,即每页,实际数据和我们要遍历的总计。

 

使用Material-UI进行分页

材料UI  提供分页 零件  允许用户从各种页面中选择确切的页面。

例如,具有以下“分页”组件:

<分页数= {10} />

<分页计数= {10}颜色=”primary” />

<分页计数= {10}变体=”outlined” />

<分页计数= {10}变体=”outlined” color=”primary” />

<分页数= {10}形状=”rounded” />

<分页计数= {10}变体=”outlined” shape=”rounded” />   (courtesy-//bezkoder.com)

 

 

现在来看一个示例,该示例将借助代码和一些计算来讲述反应分页。

 

getPager(totalItems,currentPage,pageSize){

 

//默认为首页

 

currentPage = currentPage || 1;

 

 

//默认页面大小为10

 

pageSize = pageSize || 10;

 

 

//计算总页数

 

var totalPages = Math.ceil(totalItems / pageSize);

 

 

var startPage,endPage;

 

如果(totalPages<= 10) {

 

//总页数少于10,因此显示全部

 

startPage = 1;

 

endPage = totalPages;

 

}其他{

 

//总页数超过10,因此请计算起始页和结束页

 

如果(currentPage<= 6) {

 

startPage = 1;

 

endPage = 10;

 

} else if(currentPage + 4>= totalPages) {

 

startPage = totalPages– 9;

 

endPage = totalPages;

 

}其他{

 

startPage =当前页– 5;

 

endPage = currentPage + 4;

 

}

 

}

 

 

 

//计算开始和结束项目的索引

 

var startIndex =(currentPage– 1) * pageSize;

 

var endIndex = Math.min(startIndex + pageSize– 1, totalItems – 1);

 

 

 

//在pager控件中创建要ng-repeat的页面数组

 

var个页面= […Array((endPage + 1) –startPage).keys()]。map(i => startPage + i);

 

 

//返回具有视图所需的所有寻呼机属性的对象

 

返回{

 

totalItems:totalItems,

 

currentPage:currentPage,

 

pageSize:pageSize,

 

totalPages:totalPages,

 

startPage:startPage,

 

endPage:endPage,

 

startIndex:startIndex,

 

endIndex:endIndex,

 

页面:页面

 

};

 

}

(courtesy-//www.cronj.com)

 

表分页

分页组件用于在无限加载不存在时分页任意项目列表’t utilized. It’SEO是必不可少的环境(例如博客)的理想选择。

对于有关表格数据的大集合的任何分页,都应应用``表分页''组件。

 

<TablePagination

组件=”div”

计数= {100}

page = {page}

onChange Page = {handleChangePage}

rowsPerPage = {rowsPerPage}

onChange RowsPerPage = {handleChangeRowsPerPage}

/>

(courtesy-//material-ui.com)

 

服务器端分页

现在,分页在客户端起作用。要将其更改为服务器端,请将paginationMode =”server”。您还需要设置重新计数道具。这样网格就知道页面总数。最后,您需要管理onPage Change来下载后续页面的行。

分页控制

早期的演示说明了如何不受限制地进行分页时,可以使用on page / PageChange道具来控制活动页面。

自定义分页组件

请遵循文档的渲染部门来设计分页组件。

使用钩子创建React分页组件

 

该组件具有:

  • 一个搜索栏,用于按标题搜索教程
  • 每页项目数量的选择元素
  • 材料UI 分页模块
  • 教程集合显示为左侧的目录
  • 所选的教程显示在右侧

 

结论

今天,我们建立了一个React分页示例,该示例通过Material UI成功使用了API。我们希望您可以轻松地在项目中应用它。给它一点时间,注意代码和说明。这是一个探索和发明的绝佳平台。明智地使用它/愉快的学习,很快见。

 

 

 

 

 

 

 

 

 

作者头像
QuikieApps
//www.qinheli.com.cn/blog
下一篇文章
反应变量声明:关于它的所有定义

最近的帖子

QuikieApps
张贴者 QuikieApps
2020年11月2日
QuikieApps
张贴者 QuikieApps
2020年11月2日

发表评论

您的电子邮件地址不会被公开。 必需的地方已做标记 *

我们使用cookie为您提供最佳体验。
Cookie政策