{"id":21033468,"url":"https://github.com/electerious/basicpaginate","last_synced_at":"2025-05-15T13:32:07.876Z","repository":{"id":54222699,"uuid":"182511251","full_name":"electerious/basicPaginate","owner":"electerious","description":"Paginate a NodeList like there's no tomorrow.","archived":false,"fork":false,"pushed_at":"2022-10-01T13:59:20.000Z","size":31,"stargazers_count":9,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-18T04:13:03.379Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/electerious.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"electerious","custom":["https://paypal.me/electerious","https://www.buymeacoffee.com/electerious"]}},"created_at":"2019-04-21T08:54:36.000Z","updated_at":"2023-08-14T09:45:31.000Z","dependencies_parsed_at":"2023-01-19T01:30:26.150Z","dependency_job_id":null,"html_url":"https://github.com/electerious/basicPaginate","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electerious%2FbasicPaginate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electerious%2FbasicPaginate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electerious%2FbasicPaginate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electerious%2FbasicPaginate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/electerious","download_url":"https://codeload.github.com/electerious/basicPaginate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254349464,"owners_count":22056352,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-19T12:57:14.869Z","updated_at":"2025-05-15T13:32:06.813Z","avatar_url":"https://github.com/electerious.png","language":"JavaScript","funding_links":["https://github.com/sponsors/electerious","https://paypal.me/electerious","https://www.buymeacoffee.com/electerious","https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=CYKBESW577YWE"],"categories":[],"sub_categories":[],"readme":"# basicPaginate\n\n[![Donate via PayPal](https://img.shields.io/badge/paypal-donate-009cde.svg)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=CYKBESW577YWE)\n\nPaginate a NodeList like there's no tomorrow.\n\nbasicPaginate turns a list of elements into a JS-controlled pagination.\n\n## Contents\n\n- [Demos](#demos)\n- [Features](#features)\n- [Requirements](#requirements)\n- [Setup](#setup)\n- [API](#api)\n- [Instance API](#instance-api)\n\n## Demos\n\n| Name | Description | Link |\n|:-----------|:------------|:------------|\n| Default | Includes most features. | [Try it on CodePen](https://codepen.io/electerious/pen/eoKgZX) |\n\n## Features\n\n- Works in all modern browsers and IE11 ([with polyfills](#requirements))\n- Supports all types of DOM elements\n- Doesn't force you to use specific classes or markup\n- CommonJS and AMD support\n- Simple JS API\n\n## Requirements\n\nbasicPaginate depends on the following browser features and APIs:\n\n- [Array.from](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from)\n- [Node​List​.prototype​.for​Each](https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach)\n\nSome of these APIs are capable of being polyfilled in older browsers. Check the linked resources above to determine if you must polyfill to achieve your desired level of browser support.\n\n## Setup\n\nWe recommend installing basicPaginate using [npm](https://npmjs.com) or [yarn](https://yarnpkg.com).\n\n```sh\nnpm install basicpaginate\n```\n\n```sh\nyarn add basicpaginate\n```\n\nInclude the JS file at the end of your `body` tag…\n\n```html\n\u003cscript src=\"dist/basicPaginate.min.js\"\u003e\u003c/script\u003e\n```\n\n…or skip the JS file and use basicPaginate as a module:\n\n```js\nconst basicPaginate = require('basicpaginate')\n```\n\n```js\nimport * as basicPaginate from 'basicpaginate'\n```\n\n## Usage\n\nThis demo shows how to use basicPaginate to turn a bunch of elements into a paginated list.\n\n```html\n\u003c!-- Elements that should be paginated --\u003e\n\u003cdiv class=\"item\"\u003eItem 1\u003c/div\u003e\n\u003cdiv class=\"item\"\u003eItem 2\u003c/div\u003e\n\u003cdiv class=\"item\"\u003eItem 3\u003c/div\u003e\n\u003cdiv class=\"item\"\u003eItem 4\u003c/div\u003e\n\u003cdiv class=\"item\"\u003eItem 5\u003c/div\u003e\n\u003cdiv class=\"item\"\u003eItem 6\u003c/div\u003e\n\u003cdiv class=\"item\"\u003eItem 7\u003c/div\u003e\n\u003cdiv class=\"item\"\u003eItem 8\u003c/div\u003e\n\n\u003c!-- Placeholder for the pagination --\u003e\n\u003cdiv class=\"placeholder\"\u003e\u003c/div\u003e\n```\n\n```js\n// 1) Create a new pagination with the items and show up to 4 elements per page\nconst instance = basicPaginate.create(document.querySelectorAll('.item'), 4)\n\n// 2) Use the `render` function to generate the HTML and to render it to the DOM\ninstance.render((instance) =\u003e {\n\n\tconst placeholder = document.querySelector('.placeholder')\n\n\t// 3) Generate the HTML of your pagination\n\t// Note: It doesn't matter how you generate the HTML as basicPaginate works with any structure\n\tplaceholder.innerHTML = `\n\t\t\u003cdiv class=\"pagination\"\u003e\n\t\t\t\u003cbutton data-basicpaginate-prev\u003e←\u003c/button\u003e\n\t\t\t\u003cbutton data-basicpaginate-next\u003e→\u003c/button\u003e\n\t\t\u003c/div\u003e\n\t`\n\n\t// 4) Return the created element so basicPaginate can look for special attributes\n\t// Note: You can also bind the event manually without adding attributes to the elements\n\treturn placeholder\n\n})\n\n// 5) Control every aspect of the pagination programmatically\ninstance.first()\ninstance.last()\ninstance.prev()\ninstance.next()\ninstance.goto(0)\n```\n\n## API\n\n### .create(elems, elemsPerPage)\n\nCreates a new basicPaginate instance.\n\nBe sure to assign your instance to a variable. Using your instance, you can…\n\n* …get the current page index.\n* …navigate back and forward.\n* …goto a specific page.\n* …goto a the first or last page.\n* …tell basicPaginate to render a HTML pagination.\n\nExample:\n\n```js\nconst instance = basicPaginate.create(document.querySelectorAll('.item'), 4)\n```\n\nParameters:\n\n- `elems` `{NodeList}` Elements that should be part of the pagination.\n- `elemsPerPage` `{Number}` Number of elements per page.\n\nReturns:\n\n- `{Object}` The created instance.\n\n## Instance API\n\nEach basicPaginate instance has a handful of handy functions. Below are all of them along with a short description.\n\n### .pages()\n\nReturns an array in which each item contains the DOM element/node objects of a page.\n\nExample:\n\n```js\nconst pages = instance.pages()\n```\n\nReturns:\n\n- `{Array}` Array in which each item contains the DOM element/node objects of a page.\n\n### .length()\n\nReturns the total number of pages.\n\nExample:\n\n```js\nconst length = instance.length()\n```\n\nReturns:\n\n- `{Number}` Total number of pages.\n\n### .current()\n\nReturns the current page index.\n\nExample:\n\n```js\nconst current = instance.current()\n```\n\nReturns:\n\n- `{Number}` Current page index.\n\n### .goto(newIndex)\n\nNavigates to a specific page.\n\nExample:\n\n```js\ninstance.goto(0)\n```\n\nParameters:\n\n- `newIndex` `{Number}` Index of the page to be displayed.\n\n### .first()\n\nNavigates to the first page.\n\nExample:\n\n```js\ninstance.first()\n```\n\n### .last()\n\nNavigates to the last page.\n\nExample:\n\n```js\ninstance.last()\n```\n\n### .prev()\n\nNavigates to the previous page or to the last page when the current page is already the first one.\n\nExample:\n\n```js\ninstance.prev()\n```\n\n### .next()\n\nNavigates to the next page or to the first page when the current page is already the last one.\n\nExample:\n\n```js\ninstance.next()\n```\n\n### .render(renderer)\n\nbasicPaginate doesn't render anything by default. Use this function to build the HTML of your pagination and to render it onto your site.\n\nThe render function accepts a function that will called every time the page of the pagination changes. It receives the current instance and allows you to generate the HTML for the pagination. Return the created element *or* the element containing the generated element and basicPaginate will look for special data attributes to automatically bind events. The supported attributes are `data-basicpaginate-first`, `data-basicpaginate-last`, `data-basicpaginate-prev`, `data-basicpaginate-next` and `data-basicpaginate-goto`. Their behaviour is equal to the functions of the instance. You can also skip the attributes or return nothing to handle the event binding on your own.\n\nExamples:\n\n```js\ninstance.render((instance) =\u003e {\n\n\tconst placeholder = document.querySelector('.placeholder')\n\n\t// Use the data attributes of basicPaginate to get automatic event binding\n\tplaceholder.innerHTML = `\n\t\t\u003cdiv class=\"pagination\"\u003e\n\t\t\t\u003cbutton data-basicpaginate-first\u003eFirst\u003c/button\u003e\n\t\t\t\u003cbutton data-basicpaginate-prev\u003e←\u003c/button\u003e\n\t\t\t${ instance.pages().map((_, index) =\u003e `\n\t\t\t\t\u003cbutton class=\"${ index === instance.current() ? 'active' : '' }\" data-basicpaginate-goto=\"${ index }\"\u003e${ index + 1 }\u003c/button\u003e\n\t\t\t`).join('') }\n\t\t\t\u003cbutton data-basicpaginate-next\u003e→\u003c/button\u003e\n\t\t\t\u003cbutton data-basicpaginate-last\u003eLast\u003c/button\u003e\n\t\t\u003c/div\u003e\n\t`\n\n\t// Return the created element so basicPaginate can look for special attributes\n\treturn placeholder\n\n})\n```\n\n```js\ninstance.render((instance) =\u003e {\n\n\tconst placeholder = document.querySelector('.placeholder')\n\n\tplaceholder.innerHTML = `\n\t\t\u003cdiv class=\"pagination\"\u003e\n\t\t\t\u003cbutton class=\"pagination__prev\"\u003e←\u003c/button\u003e\n\t\t\t\u003cbutton class=\"pagination__next\"\u003e→\u003c/button\u003e\n\t\t\u003c/div\u003e\n\t`\n\n\t// Handle the event binding on your own\n\tplaceholder.querySelector('.pagination__prev').onclick = instance.prev\n\tplaceholder.querySelector('.pagination__next').onclick = instance.next\n\n})\n```\n\n```js\ninstance.render((instance) =\u003e {\n\n\tconst placeholder = document.querySelector('.placeholder')\n\n\t// Build the HTML of your pagination with document.createElement\n\tconst prev = document.createElement('button')\n\tconst next = document.createElement('button')\n\n\tprev.innerText = '←'\n\tnext.innerText = '→'\n\n\t// Handle the event binding on your own\n\tprev.onclick = instance.prev\n\tnext.onclick = instance.next\n\n})\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felecterious%2Fbasicpaginate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felecterious%2Fbasicpaginate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felecterious%2Fbasicpaginate/lists"}