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

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

项目截图

时间: 2024-10-14 06:28:33

angular4 中自定义pagination组件的相关文章

Angular4.+ ngx-bootstrap Pagination 自定义分页组件

Angular4 随笔(二)  --自定义分页组件 1.简介 本组件主要是实现了分页组件显示功能,通过使用 ngx-bootstrap Pagination分页组件实现. 基本逻辑: 1.创建一个分页组件,如:ng g component  pager 2.父组件调用子组件,并向子组件传入基础配置信息 3.分页组件接收父组件传参,并在模板上进行配置,在html模板上定义点击事件,调用分页子组件自身一个方法 4.分页组件定义发射器,当页码发生变化时,发射通知 5.父组件模板调用分页组件处,监听分页

Android中自定义组件和它的属性

好长时间没有更新博客了,本来想积累点有深度的东西发,但一直没有找到很好的点.所以,写一些基础的东西,就当积累吧. Android开发中难免会用到自定义的组件,下面以ImageButton为例来介绍怎么自定义组件和它的属性: 第一步.在values/attrs.xml中为组件自定义属性: <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name=&

vue中自定义组件(插件)

vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: 1.首先建一个自定义组件的文件夹,比如叫loading,里面有一个index.js,还有一个自定义组件loading.vue,在这个loading.vue里面就是这个组件的具体的内容,比如: <template> <div> loading.............. </div

django中的admin组件之自定义组件

内容回顾: 一 admin的使用 app01的admin.py文件:                  class BookConfig(admin.ModelAdmin):               list_display=[]               list_display_links=[]               list_filter=[]               search_fields=[]                              def pat

Unity3D 在自定义脚本中实现Button组件上的OnClick面板

Unity3D 在自定义脚本中实现Button组件上的OnClick面板UnityEvent脚本代码事件传参多参数传入下述内容不对c#语法做过多讲解,仅对已入门并有兴趣的同学做为学习和拓展的资料 大家在Unity制作的过程中一定都使用过UI功能,那么很多人也一定见过这个面板: 那么我们如何能在自己的脚本中添加上像OnClick这样的面板呢. UnityEventUnity中内置了一个UnityEvent类作为事件处理的类,我们只要在脚本中声明出来,Unity便会自动添加到脚本面板上,这样便可以在

工程日记之HelloSlide(1):Swift自定义可视化组件的方法(继承UIView和在StoryBoard中设置)

需求描述 HelloSlide是把文本自动转化成幻灯片的软件,在幻灯片中我们有SmartArt:各种各样的几何形状,并且可以自定义大小和颜色,放在幻灯片不同的位置. 为了在我们的软件中实现类似的效果,我封装了一些自定义的组件,因为暂时只需要几何形状,我通过直接继承UIView来实现 代码 class ArcView:UIView{ var mystrokecolor:UIColor //设置笔触颜色 var color : UIColor //设置填充颜色 init(frame:CGRect,c

自定义SlidingMenu组件

在网上学习了自定义slidingmenu组件,这里记录下其中的关键点. SlidingMenu其实是一个HorizontalScrollView,里面有两个布局,通过重写几个方法达到侧滑的效果. 首先原理是在LinearLayout外嵌套了HorizontalScrollView,SlidingMenu继承HorizontalScrollView. 重写onMeasure(int widthMeasureSpec, int heightMeasureSpec),onLayout(boolean

Ember.js 入门指南——自定义包裹组件的HTML标签

按照惯例,先做好准备工作,使用Ember CLI命令生成演示所需的文件: ember g route customizing-component-element ember g component customizing-component-element ember g route home ember g route about 默认情况下,组件会被包裹在div标签内.比如,组件渲染之后得到下面的代码: <div id="ember180">   <h1>M

java实现自定义同步组件的过程

实现同步组件twinsLock:可以允许两个线程同时获取到锁,多出的其它线程将被阻塞. 以下是自定义的同步组件类,一般我们将自定义同步器Sync定义为同步组件TwinsLock的静态内部类. 实现同步器需要继承AbstractQueuedSynchronizer并覆盖相应的方法. package com.lock; import java.util.concurrent.TimeUnit;import java.util.concurrent.locks.AbstractQueuedSynchr