Configuration Object

onPaginateStart

A callback function invoked whenever a pagination operation starts.

This function is equivalent to onMixStart, and is invoked immediately after it with the same arguments. Unlike onMixStart however, it will not be invoked for filter or sort operations.

onPaginateStart

A callback function invoked whenever a pagination operation ends.

This function is equivalent to onMixEnd, and is invoked immediately after it with the same arguments. Unlike onMixEnd however, it will not be invoked for filter or sort operations.

elementPager

The “element” portion of the class name added to pager controls.

// Change from the default value of 'control' to 'pager'

var mixer = mixitup(containerEl, {
    classNames: {
        elementPager: 'pager'
    }
});

// Base pager output: "mixitup-pager"

elementPageList

The “element” portion of the class name added to the page list element, when it is in its disabled state.

The page list element is the containing element in which pagers are rendered.

// Change from the default value of 'page-list' to 'pagination-links'

var mixer = mixitup(containerEl, {
    classNames: {
        elementPageList: 'pagination-links'
    }
});

// Disabled page-list output: "mixitup-pagination-links-disabled"

elementPageStats

The “element” portion of the class name added to the page stats element, when it is in its disabled state.

The page stats element is the containing element in which information about the current page and total number of pages is rendered.

// Change from the default value of 'page-stats' to 'pagination-info'

var mixer = mixitup(containerEl, {
    classNames: {
        elementPageList: 'pagination-info'
    }
});

// Disabled page-list output: "mixitup-pagination-info-disabled"

modifierFirst

The “modifier” portion of the class name added to the first pager in the list of pager controls.

modifierLast

The “modifier” portion of the class name added to the last pager in the list of pager controls.

modifierLast

The “modifier” portion of the class name added to the previous pager in the list of pager controls.

modifierNext

The “modifier” portion of the class name added to the next pager in the list of pager controls.

modifierTruncationMarker

The “modifier” portion of the class name added to truncation markers in the list of pager controls.

page

An integer defining the starting page on load, if a page limit is active.

// The mixer will show page 3 on load, with 8 items per page.

var mixer = mixitup(containerEl, {
    pagination: {
        limit: 8
    },
    load: {
        page: 3
    }
});

generatePageList

A boolean dictating whether or not MixItUp should render a list of pager controls.

If you wish to control pagination functionality via the API, or your own UI, this can be set to false.

In order for this functionality to work, you must provide MixItUp with a pageList element matching the selector defined in selectors.pageList. Pager controls will be rendered inside this element as per the templates defined for the templates.pager and related configuration options, or if set, a custom render function supplied to the render.pager configuration option.

var mixer = mixitup(containerEl, {
    pagination: {
        limit: 8,
        generatePageList: false
    }
});

generatePageStats

A boolean dictating whether or not MixItUp should render a stats about the current page (e.g. “1 to 4 of 16”).

In order for this functionality to work, you must provide MixItUp with a pageStats element matching the selector defined in selectors.pageStats. Page stats content will be rendered inside this element as per the templates defined for the templates.pageStats and templates.pageStatsSingle configuration options, or if set, a custom render function supplied to the render.pageStats configuration option.

var mixer = mixitup(containerEl, {
    pagination: {
        limit: 8,
        generatePageStats: false
    }
});

maintainActivePage

A boolean dictating whether or not to maintain the active page when switching from filter to filter.

By default, MixItUp will attempt to maintain the active page or its highest equivalent in the new collection of matching targets (e.g. page 3 would become page 2 if there are not enough targets in the new collection), but by setting this option to false, changing the active filter will always cause the mixer to revert to page one of the new collection.

var mixer = mixitup(containerEl, {
    pagination: {
        limit: 8,
        maintainActivePage: false
    }
});

loop

A boolean dictating whether or not to allow “looping” of the built-in previous and next pagination controls.

By default, when on the first page, the “previous” button will be disabled, and when on the last page, the “next” button will be disabled. By setting this option to true, the user may loop from the first to last page and vice-versa.

var mixer = mixitup(containerEl, {
    pagination: {
        limit: 8,
        loop: true
    }
});

hidePageListIfSinglePage

A boolean dictating whether or not to prevent rendering of the built-in “page list” UI if the matching collection of targets has only enough content for one page.

var mixer = mixitup(containerEl, {
    pagination: {
        limit: 8,
        hidePageListIfSinglePage: true
    }
});

hidePageStatsIfSinglePage

A boolean dictating whether or not to prevent rendering of the built-in “page stats” UI if the matching collection of targets has only enough content for one page.

var mixer = mixitup(containerEl, {
    pagination: {
        limit: 8,
        hidePageStatsIfSinglePage: true
    }
});

limit

A number defining the maximum number of items per page.

By default, this is set to -1 and pagination is effectively disabled. By setting this to any number greater than 0, pagination will be applied to the mixers targets, effectively activating the extension.

var mixer = mixitup(containerEl, {
    pagination: {
        limit: 8
    }
});

maxPagers

A number dictating the maximum number of individual pager controls to render before truncating the list (e.g. adding an ellipses between non-consecutive pagers).

The minimum value permitted for this option is 5, which ensures there will always be at least a first, last, and two padding pagers, in addition to the pager representing the currently active page.

pager

A function returning an HTML string representing a single pager control element.

By default, MixItUp will render pager controls using its own internal renderer and templates (see templates.pager), but you may override this functionality by providing your own render function here instead. All pager elements must have a data-page element indicating the action of the control.

The function receives an object containing all neccessary information about the pager as its first parameter.

pageStats

A function returning an HTML string forming the contents of the “page stats” element.

By default, MixItUp will render page stats using its own internal renderer and templates (see templates.pageStats), but you may override this functionality by providing your own render function here instead.

The function receives an object containing all neccessary information about the current page and total pages as its first parameter.

pageList

A selector string used to query the page list element.

Depending on the value of controls.scope, MixItUp will either query the entire document for the page list element, or just the container.

pageStats

A selector string used to query the page stats element.

Depending on the value of controls.scope, MixItUp will either query the entire document for the page stats element, or just the container.

pager

pagerPrev

pagerNext

pagerTruncationMarker

pageStats

pageStatsSingle

pageStatsFail