mixitup.Mixer.md

mixitup.Mixer

Overview

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.

Contents

• paginate()
• nextPage()
• prevPage()

paginate()

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

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

	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.
Returns	Promise.<mixitup.State>	A promise resolving with the current state object.

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

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

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

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

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

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

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
    });