当前位置: 首页 > 软件库 > Web应用开发 > Web框架 >

ngx-pagination

Pagination for Angular
授权协议 MIT License
开发语言 JavaScript
所属分类 Web应用开发、 Web框架
软件类型 开源软件
地区 不详
投 递 者 王杰
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

Pagination for Angular

The simplest solution for pagination in Angular.

Table of Contents

Demo

Check out the live demo here: http://michaelbromley.github.io/ngx-pagination/

Play with it on StackBlitz here: https://stackblitz.com/edit/angular-e1f9hq

Quick Start

npm install ngx-pagination --save

Angular Version

This library is built to work with Angular 5+, and support ahead-of-time compilation.If you need to support an earlier or pre-release version of Angular for now, please see the changelog for advice on which version to use.

Module Format

This library ships as a "flat ES module" (FESM). This means that all the JavaScript code is located in a single ES5-compatible file, but makes use of ES2015 import and export statements.

Webpack, Systemjs and Rollup all support this format and should work without problems.

A UMD bundle is also provided for systems which do not support FESM.

Simple Example

// app.module.ts
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {NgxPaginationModule} from 'ngx-pagination'; // <-- import the module
import {MyComponent} from './my.component';

@NgModule({
    imports: [BrowserModule, NgxPaginationModule], // <-- include it in your app module
    declarations: [MyComponent],
    bootstrap: [MyComponent]
})
export class MyAppModule {}
// my.component.ts
import {Component} from '@angular/core';

@Component({
    selector: 'my-component',
    template: `
    <ul>
      <li *ngFor="let item of collection | paginate: { itemsPerPage: 10, currentPage: p }"> ... </li>
    </ul>
               
    <pagination-controls (pageChange)="p = $event"></pagination-controls>
    `
})
export class MyComponent {
    p: number = 1;
    collection: any[] = someArrayOfThings;  
}

API

PaginatePipe

The PaginatePipe should be placed at the end of an NgFor expression. It accepts a single argument, an object conformingto the PaginationInstance interface. The following config options are available:

<some-element *ngFor="let item of collection | paginate: { id: 'foo',
                                                      itemsPerPage: pageSize,
                                                      currentPage: p,
                                                      totalItems: total }">...</some-element>
  • itemsPerPage [number] - required The number of items to display on each page.
  • currentPage [number] - required The current (active) page number.
  • id [string] If you need to support more than one instance of pagination at a time, set the id and ensure itmatches the id attribute of the PaginationControlsComponent / PaginationControlsDirective (see below).
  • totalItems [number] The total number of items in the collection. Only useful when doing server-side paging,where the collection size is limited to a single page returned by the server API. For in-memory paging,this property should not be set, as it will be automatically set to the value of collection.length.

PaginationControlsComponent

This a default component for displaying pagination controls. It is implemented on top of the PaginationControlsDirective, and has a pre-settemplate and styles based on the Foundation 6 pagination component. If you require a morecustomised set of controls, you will need to use the PaginationControlsDirective and implement your own component.

<pagination-controls  id="some_id"
                      (pageChange)="pageChanged($event)"
                      (pageBoundsCorrection)="pageChanged($event)"
                      maxSize="9"
                      directionLinks="true"
                      autoHide="true"
                      responsive="true"
                      previousLabel="Previous"
                      nextLabel="Next"
                      screenReaderPaginationLabel="Pagination"
                      screenReaderPageLabel="page"
                      screenReaderCurrentLabel="You're on page">
</pagination-controls>
  • id [string] If you need to support more than one instance of pagination at a time, set the id and ensure itmatches the id set in the PaginatePipe config.
  • pageChange [event handler] The expression specified will be invoked whenever the page changes via a click on one of thepagination controls. The $event argument will be the number of the new page. This should be used to update the value of the currentPage variable which was passed to the PaginatePipe.
  • pageBoundsCorrection [event handler] The expression specified will be invoked when the currentPage value is found to be out-of-bounds (e.g. the collection size was reduced). The $event argument will be the number of the closest valid page.
  • maxSize [number] Defines the maximum number of page links to display. Default is 7. Minimum is 5.
  • directionLinks [boolean] If set to false, the "previous" and "next" links will not be displayed. Default is true.
  • autoHide [boolean] If set to true, the pagination controls will not be displayed when all items in thecollection fit onto the first page. Default is false.
  • responsive [boolean] If set to true, individual page links will not be displayed on small screens. Default is false.
  • previousLabel [string] The label displayed on the "previous" link.
  • nextLabel [string] The label displayed on the "next" link.
  • screenReaderPaginationLabel [string] The word for "Pagination" used to label the controls for screen readers.
  • screenReaderPageLabel [string] The word for "page" used in certain strings generated for screen readers, e.g. "Next page".
  • screenReaderCurrentLabel [string] The phrase indicating the current page for screen readers, e.g. "You're on page ".

PaginationControlsDirective

The PaginationControlsDirective is used to build components for controlling your pagination instances. The directive selector is pagination-template, either as an element or an attribute.It exports an API named "paginationApi", which can then be used to build the controls component.

It has the following inputs and outputs:

@Input() id: string;
@Input() maxSize: number;
@Output() pageChange: EventEmitter<number>;
@Output() pageBoundsCorrection: EventEmitter<number>;

Here is an example of how it would be used to build a custom component:

<pagination-template #p="paginationApi"
                     (pageChange)="pageChange.emit($event)"
                     (pageBoundsCorrection)="pageBoundsCorrection.emit($event)">

        <div class="pagination-previous" [class.disabled]="p.isFirstPage()">
            <a *ngIf="!p.isFirstPage()" (click)="p.previous()"> < </a>
        </div>

        <div *ngFor="let page of p.pages" [class.current]="p.getCurrent() === page.value">
            <a (click)="p.setCurrent(page.value)" *ngIf="p.getCurrent() !== page.value">
                <span>{{ page.label }}</span>
            </a>
            <div *ngIf="p.getCurrent() === page.value">
                <span>{{ page.label }}</span>
            </div>
        </div>

        <div class="pagination-next" [class.disabled]="p.isLastPage()">
            <a *ngIf="!p.isLastPage()" (click)="p.next()"> > </a>
        </div>
    
</pagination-template>

The key thing to note here is #p="paginationApi" - this provides a local variable, p (name it however you like), which can be used in thetemplate to access the directive's API methods and properties, which are explained below:

  • pages [{ label: string, value: any }[]] Array of page objects containing the page number and label.
  • maxSize [number] Corresponds to the value of maxSize which is passed to the directive.
  • getCurrent() [() => number] Returns the current page number.
  • setCurrent(val) [(val: number) => void] Triggers the pageChange event with the page number passed as val.
  • previous() [() => void] Sets current page to previous, triggering the pageChange event.
  • next() [() => void] Sets current page to next, triggering the pageChange event.
  • isFirstPage() [() => boolean] Returns true if the current page is the first page.
  • isLastPage() [() => boolean] Returns true if the current page is the last page
  • getLastPage() [() => number] Returns the page number of the last page.
  • getTotalItems() [() => number] Returns the total number of items in the collection.

For a real-world implementation of a custom component, take a look at the source for the PaginationControlsComponent.

Styling

The PaginationControlsComponent can be styled by simply overriding the default styles. To overcome Angular's view encapsulation, you may need to use the /deep/ operator to target it (depending on the type of encapsulation your component is using).

To avoid specificity issues, just add your own custom class name to the element, which will allow your styles to override the defaults:

// head
<style>
  .my-pagination /deep/ .ngx-pagination .current {
    background: red;
  }
</style>

// body
<pagination-controls class="my-pagination"><pagination-controls>

Server-Side Paging

In many cases - for example when working with very large data-sets - we do not want to work with the full collectionin memory, and use some kind of server-side paging, where the server sends just a single page at a time.

This scenario is supported by ngx-pagination by using the totalItems config option.

Given a server response json object like this:

{
  "count": 14453,
  "data": [
    { /* item 1 */ },
    { /* item 2 */ },
    { /* item 3 */ },
    { /*   ...  */ },
    { /* item 10 */ }
  ]
}

we should pass the value of count to the PaginatePipe as the totalItems argument:

<li *ngFor="let item of collection | paginate: { itemsPerPage: 10, currentPage: p, totalItems: res.count }">...</li>

This will allow the correct number of page links to be calculated. To see a complete example of this (includingusing the async pipe), see the demo.

Multiple Instances

It is possible to have any number of pagination pipe/controls pairs in the same template. To do this, just make use of the "id" attribute:

<ul>
  <li *ngFor="let item of collection | paginate: { itemsPerPage: 10, currentPage: p1, id: 'first' }"> ... </li>
</ul>
<pagination-controls (pageChange)="p1 = $event" id="first"></pagination-controls>

<ul>
  <li *ngFor="let item of collection | paginate: { itemsPerPage: 10, currentPage: p2, id: 'second' }"> ... </li>
</ul>
<pagination-controls (pageChange)="p2 = $event" id="second"></pagination-controls>

You can even have dynamically-generated instances, e.g. within an ngFor block:

export class MyComponent {
  p: number[] = [];
}
<div *ngFor="let id of [1, 2]; let i = index;">
  <ul>
    <li *ngFor="let item of collection | paginate: { itemsPerPage: 10, currentPage: p[i], id: id }">{{ item }}</li>
   </ul>
   <pagination-controls (pageChange)="p[i] = $event" [id]="id"></pagination-controls>
</div>

FAQ

Why does my filter not work with pagination?

A common issue is that people have trouble combining some kind of filter pipe with the paginate pipe. The typical symptom is that only the contents of the current page are filtered. The reason is that the paginate pipe must come after the filter pipe:

<ul>
  <li *ngFor="let item of collection | paginate: config | filter: queryString">WRONG</li> <-- This will not work as expected
</ul>

<ul>
  <li *ngFor="let item of collection | filter: queryString | paginate: config">CORRECT</li>
</ul>

How do I use the ngFor index with the pagination pipe?

If you need to use the index of the *ngFor in combination with pagination pipe, the index should be declared after the pagination pipe:

<ul>
  <li *ngFor="let item of collection; let i = index | paginate: config">WRONG</li>
</ul>

<ul>
  <li *ngFor="let item of collection | paginate: config; let i = index">CORRECT</li>
</ul>

How do I get the absolute index of a list item?

Using the index variable exposed by ngFor will always give you the index of the items relative to the current page. For example, if you have 10 items per page, you might expect the first item on page 2 to have an index value of 10, whereas you will find the index value to be 0. This is because ngFor has no knowledge of the pagination, it only ever knows about the 10 items of the current page.

However, the absolute index can be calculated according to the following formula:

absoluteIndex(indexOnPage: number): number {
  return this.itemsPerPage * (this.currentPage - 1) + indexOnPage;
}

In a template this would look something like:

<ul>
  <li *ngFor="let item of collection | paginate: { currentPage: currentPage, itemsPerPage: itemsPerPage }; let i = index">
    {{ itemsPerPage * (currentPage - 1) + i }}
  </li>
</ul>

Building from source

Requires globally-installed node (tested with v5.x) & npm.

npm install
npm run test
npm run build 

test runs the Karma tests once. You can also use test:watch to keep tests running in watch mode.

npm run build creates an intermediate /build folder, but the final output of the lib (which gets published to npm) is in the /dist folder.

Building the docs

cd docs
npm install
npm run docs:watch // dev mode
npm run docs:dist // production mode

When in dev mode, serve the /docs folder with an http server, and go to http://localhost:<port>/index-dev.html in your browser.

License

MIT

  • 我正在使用ngx-pagination与服务器端分页。因此,用户输入一些搜索条件并点击搜索按钮。这会导致对服务器调用结果的第一页。在客户端,我有这个代码来显示分页控件ngx-pagination - 重置分页到第一页 id="serverPaging"> id:'serverPaging', itemsPerPage: 10, currentPage: p, totalItems: totalRe

  • 使用Angular4.+ ngx-bootstrap Pagination 搜索并初始化页数 此时分页使用可以正常进行页数切换并获取指定页数 问题点:点击条件查询后如果之前点击分页页数不在第一页(比如此刻在第6页内容时),但是传入后台的条件与页数为当前页获取的数据会根据条件查询出并显示第6页内容,如果数据不够6页则显示当前数据的最大页。 解决思路:每次入参查询当前页设置为0(此值与后端人员协商,也

  • 1.安装X.PagedList GitHub 地址:https://github.com/dncuug/X.PagedList .NET Core (.NET Standard 2.0) Install X.PagedList.Mvc.Core via NuGet - that will automatically install X.PagedList as well. 方法应该是:dotnet

  • <pagination [totalItems]="totalElments" (pageChanged)="pageChanged($event)" [previousText]="'上一页'" [nextText]="'下一页'"></pagination>  

  • 我项目中用到的是:<a-list> 中的 pagination 配置 <a-list item-layout="horizontal" :data-source="state.bookList" :bordered="true" :pagination="paginationProps"> ... </a-list> pagina

 相关资料
  • ngx-weui 是一个使用 Angular 构建的 WeUI 组件。 在线示例以及API文档。

  • ngx-fastdfs 是 nginx + lua +fastdfs 实现分布式图片实时动态压缩。 install 进入docker目录docker build -t  fastdfs:dev . 使用 docker -idt -p 80:80 fastdfs:dev /bin/bash进入容器执行/etc/rc.local 测试 进入容器执行test目录下的./test.sh或者直接执行下面脚本

  • ngx-markdown ngx-markdown is an Angular library that combines... Marked to parse markdown to HTML Prism.js for language syntax highlight Emoji-Toolkit for emoji support KaTeX for math expression rende

  • ngx-admin Who uses ngx-admin?| Documentation | Installation Guidelines | Angular templates New! Material theme for ngx-admin Material admin theme is based on the most popular Angular dashboard templat

  • @sweetalert2/ngx-sweetalert2 Official SweetAlert2 integration for Angular This is not a regular API wrapper for SweetAlert (which already works very well alone), it intends to provide Angular-esque ut

  • ngx-dropzone A lightweight and highly customizable Angular dropzone component for file uploads. For a demo see DEMO. And the CODE for the demo. Install $ npm install --save ngx-dropzone Usage // in ap

  • ngx-slick Support angular 6+, Slick 1.8.1 Example Installation To install this library, run: $ npm install ngx-slick --save Consuming your library Once you have published your library to npm, you can

  • Angular Module for displaying a feed of items in a masonry layout using https://github.com/desandro/masonry This package was originally a fork from https://github.com/jelgblad/angular2-masonry to allo