{"_id":"mixitup-pagination","_rev":"1-7f8512935d242f76ca776484320d88ac","name":"mixitup-pagination","dist-tags":{"latest":"3.3.2"},"versions":{"3.3.1":{"name":"mixitup-pagination","version":"3.3.1","author":{"name":"KunkaLabs Limited"},"license":"Apache-2.0","_id":"mixitup-pagination@3.3.1","maintainers":[{"name":"kunkalabs","email":"info@kunkalabs.com"}],"homepage":"https://github.com/patrickkunka/mixitup#readme","bugs":{"url":"https://github.com/patrickkunka/mixitup/issues"},"dist":{"shasum":"23d41e6dba6cfa5d7e94f03c118a779012fd5e8f","tarball":"https://registry.npmjs.org/mixitup-pagination/-/mixitup-pagination-3.3.1.tgz","fileCount":51,"integrity":"sha512-7vhVUbiYIc2TBVEhtePsO0j/2kvMTTgbHQOX/3p+k0xiAX1tCs2YBV8mDJzc/Rzsg11C0J78zYPZNLZ6+0t5UQ==","signatures":[{"sig":"MEUCICqvOJDUvj6DHFTRG5nb6S1edDVKAGx0g5DAb7zrWOZQAiEApf9TOkXUZrFzUnPPmv0XPEGuatRp5yPMfPHvb0J3HRE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":237533},"main":"./dist/mixitup-pagination.js","title":"MixItUp Pagination","gitHead":"d3c0f5aa7ae8a27eec9b7b154dcc582b76ac42b4","_npmUser":{"name":"kunkalabs","email":"info@kunkalabs.com"},"repository":{"url":"git+https://github.com/patrickkunka/mixitup.git","type":"git"},"_npmVersion":"10.8.2","description":"Client-side pagination for filtered and sorted content","directories":{},"_nodeVersion":"21.2.0","dependencies":{"mixitup":"^3.1.8"},"_hasShrinkwrap":false,"devDependencies":{"chai":"^3.5.0","gulp":"^3.8.8","mocha":"^3.0.2","gulp-jscs":"^4.0.0","gulp-jshint":"^1.8.5","gulp-rename":"^1.2.2","gulp-uglify":"~1.5.1","jsdom-global":"2.0.0","merge-stream":"^0.1.7","vinyl-buffer":"^1.0.0","mixitup-build":"git://github.com/patrickkunka/mixitup-build.git","jshint-stylish":"~1.0.0","gulp-livereload":"~2.1.1","gulp-sourcemaps":"^1.5.2","chai-as-promised":"^5.3.0","vinyl-source-stream":"^1.1.0","chai-shallow-deep-equal":"^1.4.0"},"_npmOperationalInternal":{"tmp":"tmp/mixitup-pagination_3.3.1_1729867438185_0.1357013098440374","host":"s3://npm-registry-packages"}},"3.3.2":{"name":"mixitup-pagination","title":"MixItUp Pagination","version":"3.3.2","description":"Client-side pagination for filtered and sorted content","author":{"name":"KunkaLabs Limited"},"license":"Apache-2.0","main":"./dist/mixitup-pagination.js","repository":{"type":"git","url":"git+https://github.com/patrickkunka/mixitup-pagination.git"},"dependencies":{"mixitup":"^3.1.8"},"devDependencies":{"gulp":"^3.8.8","gulp-jscs":"^4.0.0","gulp-jshint":"^1.8.5","gulp-livereload":"~2.1.1","gulp-rename":"^1.2.2","gulp-sourcemaps":"^1.5.2","gulp-uglify":"~1.5.1","jshint-stylish":"~1.0.0","merge-stream":"^0.1.7","vinyl-buffer":"^1.0.0","vinyl-source-stream":"^1.1.0","mocha":"^3.0.2","jsdom-global":"2.0.0","chai":"^3.5.0","chai-as-promised":"^5.3.0","chai-shallow-deep-equal":"^1.4.0","mixitup-build":"git://github.com/patrickkunka/mixitup-build.git"},"_id":"mixitup-pagination@3.3.2","gitHead":"27bd7b109a52325058e566c89532f87261c8ad36","bugs":{"url":"https://github.com/patrickkunka/mixitup-pagination/issues"},"homepage":"https://github.com/patrickkunka/mixitup-pagination#readme","_nodeVersion":"21.2.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-DRVdwp5NvPeisiVzyENLlxYGWY4bCo5K7AhGZEVMC3baSbSlMWndZquwKlky0gvcLSCHgNavgoTjfNMAyIVngQ==","shasum":"fe5d3d43afbf2af4fa6d32c1c36da778f4505de9","tarball":"https://registry.npmjs.org/mixitup-pagination/-/mixitup-pagination-3.3.2.tgz","fileCount":51,"unpackedSize":237544,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHjHqrTF8Ay/zSOPXzwGwMbydPOajjV5fxBdUc3yJdxtAiEAp0NJeJN4SZlMHsuW/2V8eaYrEaUOF+bVHvQNKxtxPiU="}]},"_npmUser":{"name":"kunkalabs","email":"info@kunkalabs.com"},"directories":{},"maintainers":[{"name":"kunkalabs","email":"info@kunkalabs.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mixitup-pagination_3.3.2_1729867672027_0.5520720245217225"},"_hasShrinkwrap":false}},"time":{"created":"2024-10-25T14:43:58.184Z","modified":"2024-10-25T14:47:52.442Z","3.3.1":"2024-10-25T14:43:58.379Z","3.3.2":"2024-10-25T14:47:52.261Z"},"bugs":{"url":"https://github.com/patrickkunka/mixitup-pagination/issues"},"author":{"name":"KunkaLabs Limited"},"license":"Apache-2.0","homepage":"https://github.com/patrickkunka/mixitup-pagination#readme","repository":{"type":"git","url":"git+https://github.com/patrickkunka/mixitup-pagination.git"},"description":"Client-side pagination for filtered and sorted content","maintainers":[{"name":"kunkalabs","email":"info@kunkalabs.com"}],"readme":"# 📣 November 2024 Update 📣\n\nThe MixItUp Pagination Extension is now **fully open source** and publicly available for all types of use. A purchase or commercial license is no longer required.\n\nRead more: http://github.com/patrickkunka/mixitup#november-2024-update\n\n---\n\n# MixItUp Pagination\n\nMixItUp Pagination is an extension for MixItUp 3, adding dynamic and responsive client-side pagination to filterable and sortable content.\n\n### Features\n\n- Paginate through **filtered** and **sorted** content\n- Real-time page limit configuration – ideal for **responsive** grids\n- Real-time **dynamically generated controls** and **page statistics** based on the current filter, sort, and page limit values\n- New API methods\n- New configuration options\n\n### Uses\n\n- Increase usability and reduce excessive scrolling when dealing with large datasets\n- Provide visual feedback about content to users as they filter and sort\n\n### Limitations\n\n- Client-side only - the entire target collection must exist in the DOM\n\n*NB: If you're looking to integrate server-side ajax pagination with MixItUp, consider using MixItUp 3's Dataset API.*\n\n## Demos\n\nHosted interactive demos may be found at [patrickkunka.github.io/mixitup-pagination/demos](https://patrickkunka.github.io/mixitup-pagination/demos). The documented source code of each demo can be found in the [/demos](./demos/) directory if this repository.\n\n## Get Started\n\n### Installing Extensions\n\nMixItUp extensions may be included in your project via NPM and imported as modules, or loaded globally via a script tag.\n\n#### Script Tag\n\nIf using a script tag, you simply need to load the pagination distribution script (i.e. `mixitup-pagination.min.js`) **after** mixitup, and the extension will automatically detect the `mixitup` global variable and install itself.\n\n```html\n        ...\n\n        <script src=\"/path/to/mixitup.min.js\"></script>\n        <script src=\"/path/to/mixitup-pagination.min.js\"></script>\n    </body>\n</html>\n```\n\n#### Module Import\n\nIf you are building a modular JavaScript project with Webpack, Browserify, or RequireJS, no global variables are exposed. Firstly require both the MixItUp core *and* the Pagination extension into your module. Then call `mixitup.use()` with the extension passed in as an argument. Your extension will be installed and made available to all MixItUp instances throughout your project.\n\n```js\n// ES2015+\n\nimport mixitup from 'mixitup';\nimport mixitupPagination from 'mixitup-pagination';\n\n// Call the mixitup factory's .use() method, passing in the extension to install it\n\nmixitup.use(mixitupPagination);\n```\n\n```js\n// CommonJS\n\nvar mixitup = require('mixitup');\nvar mixitupPagination = require('mixitup-pagination');\n\nmixitup.use(mixitupPagination);\n```\n\n```js\n// AMD\n\nrequire([\n    'mixitup',\n    'mixitup-pagination'\n], function(\n    mixitup,\n    mixitupPagination\n) {\n    mixitup.use(mixitupPagination);\n});\n```\n\nYou need only call the `.use()` function once per project, per extension, as module loaders will cache a single reference to MixItUp inclusive of all changes made.\n\n### Using Pagination\n\nMixItUp Pagination extends MixItUp's API and configuration object with various new methods and properties.\n\nBy default, pagination functionality is disabled so that you can use MixItUp as normal, even with the extension installed. To enable pagination functionality for a mixer, you simply need to set a value for the `pagination.limit` configuration option.\n\n```js\nvar mixer = mixitup(containerEl, {\n    pagination: {\n        limit: 8 // impose a limit of 8 targets per page\n    }\n});\n```\n\n### Page List UI\n\nGiven a \"page list\" element in DOM, MixItUp Pagination will automatically generate a list of \"pager\" controls allowing the user to move from page to page, as well as providing visual feedback about the current number of pages.\n\nMixItUp Pagination will query the DOM for an element matching the `selectors.pageList` configuration option (`'.mixitup-page-list'` by default). If a matching element is found, a list of pager buttons will be automatically rendered inside this element.\n\n```html\n<div class=\"container\">\n    <div class=\"mix\"></div>\n    <div class=\"mix\"></div>\n    ...\n</div>\n\n<div class=\"mixitup-page-list\"></div>\n```\n\n### Page Stats UI\n\nGiven a \"page stats\" element in the DOM, MixItUp Pagination will automatically render information about the page and matching dataset, for example \"5-8 of 32\".\n\nMixItUp Pagination will query the DOM for an element matching the `selectors.pageStats` configuration option (`'.mixitup-page-stats'` by default). If a matching element is found, content will be rendered inside this element.\n\n```html\n<div class=\"container\">\n    <div class=\"mix\"></div>\n    <div class=\"mix\"></div>\n    ...\n</div>\n\n<div class=\"mixitup-page-list\"></div>\n<div class=\"mixitup-page-stats\"></div>\n```\n\n## Using the API\n\nAs with the MixItUp core, the default \"pager\" controls are optional. If you wish to change the curent page or page limit via the API, MixItUp Pagination adds several new mixer API methods allowing API-based full control.\n\n###### Example: Calling an API method\n\n```js\nvar mixer = mixitup(containerEl, {\n    pagination: {\n        limit: 12\n    }\n});\n\nmixer.paginate(2); // go to page 2\n```\n\nFurther reading: [Mixer API Methods](./docs/mixitup.Mixer.md)\n\n## Configuration\n\nMixItUp Pagination adds various new properties to the configuration object. If no configuration object is passed, the default settings will be used. However, `pagination.limit` must always be set to a value greater than `0` if you wish to enable pagination on instantiation.\n\n###### Example: Customizing pagination options\n\n```js\nvar mixer = mixitup(containerEl, {\n    pagination: {\n        limit: 4,\n        maintainActivePage: false,\n        loop: true,\n        hidePageListIfSinglePage: true\n    },\n    load: {\n        page: 3 // load page 3 on instantiation\n    }\n});\n```\n\nFurther reading: [Configuration Object](/docs/mixitup.Config.md)\n\n","readmeFilename":"README.md"}