Sign in
3.3.0

mixitup.Mixer

The mixitup.Mixer class is extended with the following methods relating to the Pagination extension.

For the full list of methods, 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.prevPage()
    .then(function(state) {
        console.log(mixer.getState().activePagination.page === 4); // true
    });