mixitup.Mixer

The MixItUp configuration object is extended with properties relating to the Pagination extension.

For the full list of configuration option properties, please refer to the MixItUp core documentation.

paginate()

.paginate(page [, animate] [, callback])

Type Name Description
@param number, string, object, HTMLElement page

A page number, string ('next', 'prev'), HTML element reference, or command object.

@param boolean [animate]

An optional boolean dictating whether the operation should animate, or occur syncronously with no animation. true by default.

@param function [callback]

An optional callback function to be invoked after the operation has completed.

@return Promise.<mixitup.State> A promise resolving with the current state object.

Changes the current page and/or the current page limit.

Example 1: Changing the active page

console.log(mixer.getState().activePagination.page); // 1

mixer.paginate(2)
    .then(function(state) {
        console.log(mixer.getState().activePagination.page === 2); // true
    });

Example 2: Progressing to the next page

console.log(mixer.getState().activePagination.page); // 1

mixer.paginate('next')
    .then(function(state) {
        console.log(mixer.getState().activePagination.page === 2); // true
    });

Example 3: Starting a page from an abitrary "anchor" element

var anchorEl = mixer.getState().show[3];

mixer.paginate(anchorEl)
    .then(function(state) {
        console.log(mixer.getState().activePagination.anchor === anchorEl); // true
        console.log(mixer.getState().show[0] === anchorEl); // true
    });

Example 4: Changing the page limit

var anchorEl = mixer.getState().show[3];

console.log(mixer.getState().activePagination.limit); // 8

mixer.paginate({
   limit: 4
})
    .then(function(state) {
        console.log(mixer.getState().activePagination.limit === 4); // true
    });

Example 5: Changing the active page and page limit

mixer.paginate({
   limit: 4,
   page: 2
})
    .then(function(state) {
        console.log(mixer.getState().activePagination.page === 2); // true
        console.log(mixer.getState().activePagination.limit === 4); // true
    });
nextPage()

.nextPage()

Type Name Description
@return Promise.<mixitup.State> A promise resolving with the current state object.

A shorthand for .paginate('next'). Moves to the next page.

Example: Moving to the next page

console.log(mixer.getState().activePagination.page); // 1

mixer.nextPage()
    .then(function(state) {
        console.log(mixer.getState().activePagination.page === 2); // true
    });
prevPage()

.prevPage()

Type Name Description
@return Promise.<mixitup.State> A promise resolving with the current state object.

A shorthand for .paginate('prev'). Moves to the previous page.

Example: Moving to the previous page

console.log(mixer.getState().activePagination.page); // 5

mixer.prevtPage()
    .then(function(state) {
        console.log(mixer.getState().activePagination.page === 4); // true
    });