NgxPaginate Angular pagination for your grid (or any other form of data). It is just about remembering the state of the current page.

It calculates how many pages it needs/can display for users to choose from based on the current page, page size, and total items.

How to make use of it:

Installations

npm install ngx-paginate --save

1. import module

import { NgxPaginateModule } from 'ngx-paginate';

@NgModule({
  imports: [
    NgxPaginateModule
  ]
})

2. Use in your component:

<ngx-paginate
  [page]="page"
  [options]="options"
  (pageChange)='setPage($event)'
  (pageSizeChange)='setPage($event)'>
</ngx-paginate>

3. When the page is of type PageState (it also comes with a component):

export class PageState {
  currentPage: number;
  pageSize: number;
  totalItems?: number;
  numberOfPages?: number;
}

4. The options are a kind of Paginate option (they also come with the component):

export class PaginateOptions {
  // number of how many pages additionally will be shown on left and right
  spanPages: number;
  // show or hide button for first page (default is true)
  firstPage: boolean;
  // show or hide button for previous page (default is true)
  previousPage: boolean;
  // show or hide button for next page (default is true)
  nextPage: boolean;
  // show or hide button for last page (default is true)
  lastPage: boolean;
  // string that will be shown in appropriate boxes (defaults to <<, >>, < and >)
  titles: {
    firstPage: string;
    lastPage: string;
    previousPage: string;
    nextPage: string;
  };
  // which values to allow to change page for
  pageSizes: [{
    value: 5,
    display: '5'
  }, {
    value: 10,
    display: '10'
  }, {
    value: 15,
    display: '15'
  }]
}

5. The default options are:

const defaults: PaginateOptions = {
  spanPages : 2,
  previousPage: true,
  nextPage: true,
  firstPage: true,
  lastPage: true,
  titles: {
    firstPage: 'First',
    previousPage: 'Previous',
    lastPage: 'Last',
    nextPage: 'Next',
    pageSize: 'Items per page'
  },
  pageSizes: [{
    value: 5,
    display: '5'
  }, {
    value: 10,
    display: '10'
  }, {
    value: 15,
    display: '15'
  }]
};

6. And the pageChange is fired every time the page is changed via the component:

pageChange(pageState: PageState) {
  console.log('Page changed. Reload data with new paging values');
  // do whatever you need here
}

See Demo And Download

Official Website(slavede): Click Here

This superior jQuery/javascript plugin is developed by slavede. For extra Advanced Usages, please go to the official website.