Pagination / pager module for aurelia.
JavaScript HTML
Latest commit e40478a Jan 13, 2017 @RWOverdijk RWOverdijk committed on GitHub Merge pull request #27 from bas080/chore/update-license-year
chore(project): update license year
Permalink
Failed to load latest commit information.
dist chore(project) new build Oct 4, 2016
doc Merge pull request #27 from bas080/chore/update-license-year Jan 13, 2017
src chore(pager): linting Nov 4, 2016
test chore(test): lint Aug 9, 2016
.editorconfig feat(project): new build tasks with typings and bundled Jul 28, 2016
.eslintrc.json chore(project): npm scripts and spoonx-tools Nov 4, 2016
.gitignore
.npmignore
.remarkrc feat(project): new build tasks with typings and bundled Jul 28, 2016
.travis.yml chore(project): npm scripts and spoonx-tools Nov 4, 2016
CONTRIBUTING.md doc(docs): add doc blocks, contributing and contributors Jun 3, 2016
LICENSE chore(project): update license year Jan 12, 2017
README.md doc(readme): install instr. update Aug 10, 2016
bower.json chore(project): bump 0.1.0 Oct 5, 2016
config.js chore(project): bump 0.1.0 Oct 5, 2016
gulpfile.js chore(project): npm scripts and spoonx-tools Nov 4, 2016
package.json chore(project): npm scripts and spoonx-tools Nov 4, 2016
spoonx.js chore(karma): serve src html Nov 4, 2016
typings.json

README.md

Pager

Pagination / pager module for aurelia. Works well with aurelia-paged.

Uses

Aurelia-pager needs following plugins installed and configured:

Used by

Following plugins need an installation of aurelia-pager:

Installation

Aureli-Cli

Run npm i aurelia-pager --save from your project root.

And add the following to the build.bundles.dependencies section of aurelia-project/aurelia.json:

"dependencies": [
  {
    "name": "aurelia-pager",
    "path": "../node_modules/aurelia-pager/dist/amd",
    "main": "aurelia-pager",
    "resources": [
      "bootstrap/pager.html"
    ]
  },
  // ...
],

Jspm

Run jspm i aurelia-pager from your project root.

And add following to the bundles.dist.aurelia.includes section of build/bundles.js:

 "aurelia-pager",
 "[aurelia-pager/**/*.js]",
 "aurelia-pager/**/*.html!text",

If the installation results in having forks, try resolving them by running:

jspm inspect --forks
jspm resolve --only registry:package-name@version

Webpack

Run npm i aurelia-pager --save from your project root.

And add aurelia-pager in the coreBundles.aurelia section of your webpack.config.js.

Typescript

Npm-based installations pick up the typings automatically. For Jspm-based installations, run typings i github:spoonx/aurelia-pager or add "aurelia-pager": "github:spoonx/aurelia-pager", to your typings.json and run typings i.

Usage

Bindables

page (optional)

The current page, default is 1.

pages

The amount of pages.

pagerange (optional)

The range of the pages to view, default is 3.

Example:

Range is 2: 3 4 [5] 6 7, [1] 2 3 4 5

Range is 3: 2 3 4 [5] 6 7 8, [1] 2 3 4 5 6 7

The amount of displaying is range * 2 + current page

limit (optional)

This will set the amount of items on a page and will be used to calculate the amount of pages, default is 30.

resource (optional)

Will override the pages option.

Using a database

Fetches the count from the DB using aurelia-orm. Expects that the amount of pages is located in the count property.

Using an array

Calculates the pages based on the amount of items in the array and the limit.

criteria (optional)

This option only works when resource is enabled and comes from the DB. Parameter gets passed straight to the query field of .count().

Example (sailsjs/waterline or express):

{
  disabled : 0,
  createdAt: {'>', '2016-01-01'}
}

Changing framework

You can override the framework used for the datatable with any of the supported ones using the aurelia-view-manager.

Examples

<pager pages.bind="$amountOfPages" page.bind="1" pagerange.bind="2"></pager>

Using a resource:

this.localData = [{id: 1, name: 'bob'}, {id: 2, name: 'henk'}, {id: 3, name: 'jan'}];
<pager resource.bind="localData"></pager>

Using criteria (using aurelia-orm:

this.dbData = entityManager.getRepository('users');
<pager repository.bind="dbData" criteria.bind="{disabled: 0}"></pager>