It was fun while it lasted, but we have to stop maintaining these repositories. We haven't used these projects for quite some time and maintaining them is becoming harder to do.

You deserve better, and for that reason we've decided to archive some repositories, which includes this one.

Feel free to fork and alter the repositories, and go forth making awesome stuff.

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

Aurelia-pager needs following plugins installed and configured:

• aurelia-view-manager

Following plugins need an installation of aurelia-pager:

• aurelia-datatable.

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"
    ]
  },
  // ...
],

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

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

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

If your project is using PLATFORM.moduleName. Then you will need to register the plugin as follows.

aurelia.use.plugin(PLATFORM.moduleName('aurelia-pager'));

In your webpack.config.js you will need to add an import. By default the import looks like this

const { AureliaPlugin } = require('aurelia-webpack-plugin');

You need to change it as follows

const { AureliaPlugin, ModuleDependenciesPlugin } = require('aurelia-webpack-plugin');

Next find the plugins export which currently looks like this

plugins: [
    new AureliaPlugin(),
    new ProvidePlugin({
      'Promise': 'bluebird',
      '$': 'jquery',
      'jQuery': 'jquery',
      'window.jQuery': 'jquery'
    })...

You can then add the following

    new ModuleDependenciesPlugin({
      "aurelia-pager": ['./bootstrap/pager.html', './pager']
    })...

The plugins export would now looks something like this

plugins: [
    new AureliaPlugin(),
    new ProvidePlugin({
      'Promise': 'bluebird',
      '$': 'jquery',
      'jQuery': 'jquery',
      'window.jQuery': 'jquery'
    }),
    new ModuleDependenciesPlugin({
      "aurelia-pager": ['./bootstrap/pager.html', './pager']
    })...

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.

The current page, default is 1.

The amount of pages.

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

This will be called when the page value changes. The function should match the signature.

HandlePageChanged(newValue, oldValue);

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

Will override the pages option.

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

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

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'}
}

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

<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>