码迷,mamicode.com
首页 > 其他好文 > 详细

angular4 中自定义pagination组件

时间:2017-08-22 23:19:02      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:xxx   依次   简单的   上界   jquery   -o   ima   获得   示例   

 

 

技术分享
你用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判断,对传多来的数据进行处理。其实就分为:数据只够显示一页;数据显示到最后一页;数据刷新到中间页码;这三种情况下的操作。

好了,基本就完成了。有些东西也是借助网友的想法,但是思路大致都是这样。现在我改变条数和数据量看看:

技术分享
  项目截图

 

 

 

 

 

   

angular4 中自定义pagination组件

标签:xxx   依次   简单的   上界   jquery   -o   ima   获得   示例   

原文地址:http://www.cnblogs.com/sulishibaobei/p/7413808.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!