{"id":26286388,"url":"https://github.com/amaterasusan/pagination-system","last_synced_at":"2025-05-07T16:23:32.558Z","repository":{"id":65523278,"uuid":"488558823","full_name":"amaterasusan/pagination-system","owner":"amaterasusan","description":"Data Pagination is a modern Vanilla JS and ES6 library","archived":false,"fork":false,"pushed_at":"2022-06-17T17:12:25.000Z","size":1116,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-15T23:56:14.733Z","etag":null,"topics":["data-pagination","es6","filtering","js","pagination","paging","paging-library","sorting","vanilla-javascript"],"latest_commit_sha":null,"homepage":"https://amaterasusan.github.io/pagination-system/","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/amaterasusan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-05-04T11:19:57.000Z","updated_at":"2024-07-15T08:50:49.000Z","dependencies_parsed_at":"2023-01-27T06:01:42.576Z","dependency_job_id":null,"html_url":"https://github.com/amaterasusan/pagination-system","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amaterasusan%2Fpagination-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amaterasusan%2Fpagination-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amaterasusan%2Fpagination-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amaterasusan%2Fpagination-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/amaterasusan","download_url":"https://codeload.github.com/amaterasusan/pagination-system/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252913483,"owners_count":21824187,"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":["data-pagination","es6","filtering","js","pagination","paging","paging-library","sorting","vanilla-javascript"],"created_at":"2025-03-14T20:22:18.135Z","updated_at":"2025-05-07T16:23:32.534Z","avatar_url":"https://github.com/amaterasusan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Data Pagination system \n**pagination-system** is a modern **Vanilla JS** and ES6 library for **data pagination**.  \nIt includes not only **pagination** but data **filtering** and **sorting** as well.  \nIt’s also possible to use the `Show more` button or infinite scrolling of data.\n\n[![npm](https://img.shields.io/npm/v/pagination-system)](https://www.npmjs.com/package/pagination-system)\n\n* No dependencies\n* Highly customizable\n* Easy and simple to use\n\n## Screenshots\n![Example screenshot table](./screenshots/table.png)\n---\n![Example screenshot with show more button](./screenshots/products.png)\n---\n![Example screenshot with show more button](./screenshots/table-json-server.png)\n\n## How to use it\n\n- Install\nvia npm\n```markup\nnpm i pagination-system\n```\nimport as an ES module\n```javascript\n// As an ES module\nimport PaginationSystem from 'pagination-system';\n// Necessary stylesheet\nimport 'pagination-system/dist/pagination-system.min.css';\n```\nOr just include into HTML\n```markup\n// UMD Version\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/pagination-system/dist/pagination-system.min.css\"\u003e\n\u003cscript src=\"https://unpkg.com/pagination-system/dist/pagination-system.umd.min.js\"\u003e\u003c/script\u003e\n```\n\n- Create a container for storing your data and a container for pagination.  \nA container for pagination can be the same as a container for data. In any case, pagination div will be added after the data.\n```html\n\u003cdiv class=\"container\"\u003e\u003c/div\u003e\n\u003cdiv class=\"paging-container\"\u003e\u003c/div\u003e\n```\n- Initialize the Pagination System in js file.\n  ```javascript\n    const dataPaging = new PaginationSystem(options);\n  ```\n  \n  The options parameters are slightly different  \n  depending on whether the data is received at once,  \n  or the data is loaded from the server page by page.  \n  \n  + **Common Options**\n    - dataContainer - DOM element\n    - pagingContainer - DOM element\n    - dataRenderFn - function to render data\n    - perPage - optional, default is 10, number of items per page  \n    - countRecords - optional, no need to set this parameter, the number of records will be counted. \n    - isShowPerPage - optional, show or not `perPage` dropbox, default is true\n    - childSelector - optional, child selector of collection, used if `loading` is set to `'auto'`\n    - loading - optional, can be `'auto'`|`'more'`|`'none'`, default is `'none'`  \n    - textShowMore - optional, the default text is `'show more'`, used if `loading` is set to `'more'` (`Show more` button)  \n    \n  + **Special options, if all data is received**\n    - data - data array\n    - countRecords - set only if you want to reduce the data array, the data will be truncated\n    \n  + **Special options, if the data is loaded from the server page by page**  \n    - url - String, like 'https://jsonplaceholder.typicode.com/posts'\n    - urlParams - Object like \n      ```javascript\n      {\n        limit: '_limit', // url query param name (number of items to display per page) optional\n        pageNumber: '_page', // url query param name (number of page),\n      }\n      ```\n    - urlExtraParams - optional, additional URL params, if you want to restrict the data by some conditions\n      Object like \n      ```javascript\n      { id_lte: 33, id_gte: 3 }\n      ```\n    - dimmerSelector - optional, String like `'#dimmer'`, \n      \n      in html:\n      ```html\n      \u003cdiv id=\"dimmer\"\u003e\n        \u003cdiv class=\"loader\"\u003e\u003c/div\u003e\n      \u003c/div\u003e\n      ```   \n    - countRecords - you don't need to set this option.   \n      The total number of records should be in the `'X-Total-Count'` response header      \n\n\n## Available methods of the PaginationSystem class\n  * **getDataKeys()**  \n  returns Promise\n  ```javascript\n    const dataPaging = new PaginationSystem(options);\n    \n    dataPaging\n      .getDataKeys()\n      .then((dataKeys) =\u003e {\n        /* \n          dataKeys (field names) array like [\n            { name: 'id', type: 'numeric', title: 'id' },\n            { name: 'first_name', type: 'alpha', title: 'first name' },\n          ]\n        */\n        if (dataKeys \u0026\u0026 dataKeys.length) {\n          // create table header depending on dataKeys (field names) \n        }\n      });\n  ```\n  * **getNumPage()**  \n  @returns {Number} page number\n  \n  * **getPerPage()**  \n  @returns {Number} number of entries per page\n  \n  * **render(numPage)**  \n  render pages  \n  @param {Number} numPage  \n  @returns {Promise}  \n  \n  * **restoreData()**  \n  restore data after filtering\n  \n  * **sortData(queryObj, numPage)**  \n  data sorting   \n  @param {Object} queryObj  \n  @param {Number} numPage  \n  queryObj:  \n  if **options.url** - like `{'_sort': 'name', '_order': 'asc'}`    \n  depending on what query parameters your server supports to sort the data  \n  if **options.data** - `{field: 'name', direction: 1, type: 'alpha'}`  \n  direction: 1(ASC) | -1(DESC)  \n  type: `'numeric'`|`'date'`|`'alpha'` \n  \n  * **filterData(queryObj)**    \n  data filtering   \n  @param {Object} queryObj   \n  if **options.url** - queryObj like -`{ q: 'andrew', country: 'spain' }`\n  depending on what query parameters your server supports to search for records  \n  if **options.data**  \n  All available actions:     \n    * **eq**    (equals)  \n    * **ne**    (not equal)  \n    * **lt**    (less than)  \n    * **lte**   (less than or equal)  \n    * **gt**    (greater than)  \n    * **gte**   (greater than or equal)  \n    * **in_range**  \n    * **contains**  \n    * **not_contains**  \n    * **starts_with**  \n    * **ends_with**   \n  \n  ```javascript\n    const dataPaging = new PaginationSystem(options);\n    // queryObj like \n    const queryObj = {  \n      q: {value: 'andr'} // global search\n      id: { action: 'lte', value: 40 },\n      age: { action: 'in_range', value: [20, 30] },\n    };\n    \n    dataPaging\n      .filterData(queryObj)\n      .then((countRecords) =\u003e {\n        console.log('Found:', countRecords);\n      });\n  ```      \n  \n  \n## Examples\n  * options.data\n    ```javascript\n    const options = {\n      dataContainer: document.querySelector('.container'),\n      dataRenderFn: (dataPage) =\u003e {\n        .map(\n          (item) =\u003e\n            `\u003cli\u003e\n               \u003cspan class=\"item-counter\"\u003e${item.number}\u003c/span\u003e\n               \u003cspan class=\"textline\"\u003e${item.text}\u003c/span\u003e\n             \u003c/li\u003e`\n        ).join('')}\u003c/ul\u003e`;\n      },\n      data: data || [],\n      pagingContainer: document.querySelector('.paging-container'),\n    };\n    \n    new PaginationSystem(options);\n    ```\n  * options.url  \n   An example of infinite data loading:\n    ```javascript\n    const url = 'https://jsonplaceholder.typicode.com/posts'; // test server url \n    const urlParams = {\n      limit: '_limit', // url query param name (number of items to display per page) optional\n      pageNumber: '_page', // url query param name (number of page),\n    }; // url query params\n    \n    const dataRenderFn = (dataPage) =\u003e {\n      return `${dataPage\n        .map(\n          (item) =\u003e\n            `\u003cdiv class=\"card\"\u003e\n               \u003cdiv class=\"card-post\"\u003e\n                 \u003cdiv class=\"card-item-title\"\u003e\n                   \u003cspan class=\"item-counter\"\u003e${item.id}\u003c/span\u003e\n                   \u003cspan class=\"item-title\"\u003e${item.title.split(' ').slice(0, 3).join(' ')}\u003c/span\u003e\n                 \u003c/div\u003e\n                 \u003cp class=\"item-body\"\u003e${item.body}\u003c/p\u003e\n               \u003c/div\u003e\n             \u003c/div\u003e`\n        ).join('')}`;\n    };\n\n    const options = {\n      dataContainer: document.querySelector('.container'),\n      dataRenderFn: dataRenderFn,\n      url: url, \n      urlParams: urlParams,\n      pagingContainer: document.querySelector('.paging-container'),\n      perPage: 20,\n      dimmerSelector: '#dimmer', \n      childSelector: '.card', \n      loading: 'auto', \n    };\n\n    new PaginationSystem(options);\n    ```\n    \n**More available in the examples folder**","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famaterasusan%2Fpagination-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famaterasusan%2Fpagination-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famaterasusan%2Fpagination-system/lists"}