angular4 中自定义pagination组件

 

 

你用Angular 吗?

一.介绍

    一个基于angular4 开发的能够分页的组件。组件的好处就是能够复用，复用.....做为一个前端码农，开始的分页功能实现是我用jquery写的，其余同事用的时候都要将个人代码拷贝过去，因而我被鄙视了。为了避免继续被鄙视就开始了尝试。

二.基本功能

   1.根据规定的每页数据条数，分页显示数据

    2. 上下页操做数据

   直接上界面图可能清晰点：

项目截图

根据图片进行讲解下：

    根据你总数据条数:totalNum; 每页显示条数:pageSize,经过组件会自动给你分页显示。

    eg：总数41 条数据,每页显示10条数据，则是分红5页。若是想每页显示7条，则会分红6页。

三.简要代码

  架构目录图：

 

项目目录

有两个组件：pagination和page;  pagination是用来显示前面数据的，page是用来下面分页的。

pagination.html示例代码：

数据显示部分代码

ngb-xxx不用在乎，是用的ng-bootstrap，只是为了让界面好看点。其实就是一个简单的table用来显示数据。*ngFor用来取数据，懂Angular 的人应该都会，这不是重点就不介绍了。

<page ></page>  这里是引入page组件。可是传入了一些属性值；关于模板语法，依赖注入，自定义事件就不介绍了。只要知道这里是：pagination组件向page组件传入了几个值：pageSize(页面显示数据条数)，totalNum(总数据条数),curPage(当前页码
），totalPage(总页码),pageData(每页显示数据)

其中pageSize和pageData是同样的，只是后面为了操做，多传了一个值；

那么：pageSize等值都是哪里来的呢，固然是pagination.ts里定义的：

pagination.ts代码

        代码中的page就是你得到到得数据，天然totalNum就会等于数据的长度。依次算出来就行了。

        pagination组件算是完成了，如今就来看看page是怎么接收到数据并进行操做的。

       page.html页面的代码：     

page.ts 分页数据的html

其实很简单：就一个a标签显示条数，页数的，三个button,一个显示上一页，一个页数，一个下一页。每一个按钮都绑定了一个changePage事件；

看一下实现部分的代码：

page.ts分页实现部分代码

@Input是接收pagination.html组件传过来的数据。@Output是定义pagination.html页面定义的changeCurPage事件。

经过三个if else判断，对传多来的数据进行处理。其实就分为：数据只够显示一页；数据显示到最后一页；数据刷新到中间页码；这三种状况下的操做。

好了，基本就完成了。有些东西也是借助网友的想法，可是思路大体都是这样。如今我改变条数和数据量看看：

  项目截图

详情代码及效果：

https://github.com/sulishibaobei/pagination