{"id":20760403,"url":"https://github.com/vanng822/pagination","last_synced_at":"2025-04-07T07:14:41.711Z","repository":{"id":3920845,"uuid":"5010553","full_name":"vanng822/pagination","owner":"vanng822","description":"Pagination for javascript and nodejs","archived":false,"fork":false,"pushed_at":"2019-06-05T16:58:34.000Z","size":98,"stargazers_count":88,"open_issues_count":1,"forks_count":67,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-24T18:41:34.395Z","etag":null,"topics":["javascript","nodejs","pagination","paginator"],"latest_commit_sha":null,"homepage":"","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/vanng822.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":"2012-07-12T21:25:04.000Z","updated_at":"2024-01-08T15:33:59.000Z","dependencies_parsed_at":"2022-08-25T22:41:47.172Z","dependency_job_id":null,"html_url":"https://github.com/vanng822/pagination","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vanng822%2Fpagination","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vanng822%2Fpagination/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vanng822%2Fpagination/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vanng822%2Fpagination/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vanng822","download_url":"https://codeload.github.com/vanng822/pagination/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247608153,"owners_count":20965952,"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":["javascript","nodejs","pagination","paginator"],"created_at":"2024-11-17T10:13:30.181Z","updated_at":"2025-04-07T07:14:41.683Z","avatar_url":"https://github.com/vanng822.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## pagination\n\nPagination for javascript/nodejs\n\n[![build status](https://secure.travis-ci.org/vanng822/pagination.png)](http://travis-ci.org/vanng822/pagination)\n\n\n## usage example\n```js\nvar pagination = require('pagination');\nvar paginator = pagination.create('search', {prelink:'/', current: 1, rowsPerPage: 200, totalResult: 10020});\nconsole.log(paginator.render());\n```\n### Or customized renderer\nThis example show how to generate markup for twitter boostrap, see example/twitter.html for template rendering\n```js\nvar pagination = require('pagination')\n\nvar boostrapPaginator = new pagination.TemplatePaginator({\n\tprelink:'/', current: 3, rowsPerPage: 200,\n\ttotalResult: 10020, slashSeparator: true,\n\ttemplate: function(result) {\n\t\tvar i, len, prelink;\n\t\tvar html = '\u003cdiv\u003e\u003cul class=\"pagination\"\u003e';\n\t\tif(result.pageCount \u003c 2) {\n\t\t\thtml += '\u003c/ul\u003e\u003c/div\u003e';\n\t\t\treturn html;\n\t\t}\n\t\tprelink = this.preparePreLink(result.prelink);\n\t\tif(result.previous) {\n\t\t\thtml += '\u003cli class=\"page-item\"\u003e\u003ca class=\"page-link\" href=\"' + prelink + result.previous + '\"\u003e' + this.options.translator('PREVIOUS') + '\u003c/a\u003e\u003c/li\u003e';\n\t\t}\n\t\tif(result.range.length) {\n\t\t\tfor( i = 0, len = result.range.length; i \u003c len; i++) {\n\t\t\t\tif(result.range[i] === result.current) {\n\t\t\t\t\thtml += '\u003cli class=\"active page-item\"\u003e\u003ca class=\"page-link\" href=\"' + prelink + result.range[i] + '\"\u003e' + result.range[i] + '\u003c/a\u003e\u003c/li\u003e';\n\t\t\t\t} else {\n\t\t\t\t\thtml += '\u003cli class=\"page-item\"\u003e\u003ca class=\"page-link\" href=\"' + prelink + result.range[i] + '\"\u003e' + result.range[i] + '\u003c/a\u003e\u003c/li\u003e';\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tif(result.next) {\n\t\t\thtml += '\u003cli class=\"page-item\"\u003e\u003ca class=\"page-link\" href=\"' + prelink + result.next + '\" class=\"paginator-next\"\u003e' + this.options.translator('NEXT') + '\u003c/a\u003e\u003c/li\u003e';\n\t\t}\n\t\thtml += '\u003c/ul\u003e\u003c/div\u003e';\n\t\treturn html;\n\t}\n});\nconsole.log(boostrapPaginator.render());\n```\n### OR\n```js\nvar pagination = require('pagination');\nvar paginator = new pagination.SearchPaginator({prelink:'/', current: 10, rowsPerPage: 200, totalResult: 10020});\nconsole.log(paginator.render());\n// output (without newlines)\n```\n\n```html\n\u003cdiv class=\"paginator\"\u003e\n\t\u003ca href=\"/?page=9\" class=\"paginator-previous\"\u003ePrevious\u003c/a\u003e\n\t\u003ca href=\"/?page=8\" class=\"paginator-page paginator-page-first\"\u003e8\u003c/a\u003e\n\t\u003ca href=\"/?page=9\" class=\"paginator-page\"\u003e9\u003c/a\u003e\n\t\u003ca href=\"/?page=10\" class=\"paginator-current\"\u003e10\u003c/a\u003e\n\t\u003ca href=\"/?page=11\" class=\"paginator-page\"\u003e11\u003c/a\u003e\n\t\u003ca href=\"/?page=12\" class=\"paginator-page paginator-page-last\"\u003e12\u003c/a\u003e\n\t\u003ca href=\"/?page=11\" class=\"paginator-next\"\u003eNext\u003c/a\u003e\n\u003c/div\u003e\n```\n### OR need data from the calculation\n```js\nvar pagination = require('pagination');\nvar paginator = new pagination.SearchPaginator({prelink:'/', current: 3, rowsPerPage: 200, totalResult: 10020});\nconsole.log(paginator.getPaginationData());\n\n// output\n{ prelink: '/',\n  current: 3,\n  previous: 2,\n  next: 4,\n  first: 1,\n  last: 51,\n  range: [ 1, 2, 3, 4, 5 ],\n  fromResult: 401,\n  toResult: 600,\n  totalResult: 10020,\n  pageCount: 51 }\n```\n## Pagination on client side\n```html\n\u003chtml\u003e\n\t\u003chead\u003e\n\t\u003cscript src=\"../release/pagination.full.min.js\"\u003e\u003c/script\u003e\n\t\u003c/head\u003e\n\t\u003cbody\u003e\n\t\t\u003cdiv id=\"paging\"\u003e\u003c/div\u003e\n\t\t\u003cscript type=\"text/javascript\"\u003e\n\t\t(function() {\n\t\t\tvar paginator = new pagination.ItemPaginator({prelink:'/', current: 3, rowsPerPage: 200, totalResult: 10020});\n\t\t\tvar html = paginator.render();\n\t\t\tvar paginator = pagination.create('search', {prelink:'/', current: 1, rowsPerPage: 200, totalResult: 10020});\n\t\t\thtml += paginator.render();\n\t\t\tdocument.getElementById(\"paging\").innerHTML = html;\n\t\t})();\n\t\t\u003c/script\u003e\n\t\u003c/body\u003e\n\u003c/html\u003e\n```\nYou can browse example folder for more. Release folder contains all mimified versions for browser. To customize your need you can use ./bin/build.js -h\n\t\t\t\thtml += paginator.render();\n\n## Classes\n### SearchPaginator(options)\n* `options` See Options bellow\n\nSee also http://developer.yahoo.com/ypatterns/navigation/pagination/search.html\n\n### ItemPaginator(options)\n* `options` See Options bellow\n\nSee also http://developer.yahoo.com/ypatterns/navigation/pagination/item.html\n\n### TemplatePaginator(options)\n* `options` See Options bellow\n\nThis class will render the markup as desired. The options must contains property \"template\"\nIt can be either a template string or a compiled template. The local variables available in the template are\n\n* `prelink` String\n* `preparedPreLink` String\n* `current` Integer\n* `previous` Integer\n* `next` Integer\n* `first` Integer\n* `last` Integer\n* `range` Array\n* `fromResult` Integer\n* `toResult` Integer\n* `totalResult` Integer\n* `pageCount` Integer\n* `translations` Object with properties NEXT, PREVIOUS, FIRST, LAST, CURRENT_PAGE_REPORT\n\n## API\n### Paginator.getPaginationData()\nReturn an object contains data for rendering markup. See example above.\n\n### Paginator.set(option, value)\nSet value to a single for option. See options section bellow\n\n### Paginator.preparePreLink(prelink)\n* `prelink` String\n\nAppend page param to the link\n\n### Paginator.render()\nReturn the rendered markup\n\n### pagination.create(type, options)\n* `type` String\n* `options` Object see Options section bellow\n\nWrapper for create instance of classes above\n\n### pagination.TemplateEngine.parse(str, options)\nSee pagination.TemplateEngine.compile bellow\n\n### pagination.TemplateEngine.compile(str, options)\n* `str` Template string\n* `options` object which can contains .open .close .cache and .id\n\n## Options\nObject to pass to paginator classes (second argument when using create function)\n\n### totalResult: {Integer}\nNumber of total items in result set\n\t\n### prelink: {String}\nLink to append the page-param\n\n### rowsPerPage: {Integer}\nNumber of items per page, default to 10\n\n### pageLinks: {Integer}\nNumber of links to create in page range, default to 5. This value will be ignored when using item pagination.\n\n### current: {Integer}\nIndicate which page is the current one. Page always starts with 1.\n\n### translationCache: {Boolean}\nTo indicate if the result from CURRENT_PAGE_REPORT translation can be cached or not. Default is false.\nThe cache is global and will be the same for all instances which have specified translationCacheKey as bellow.\n\n### translationCacheKey: {String}\nFor supporting multiple versions of translation of CURRENT_PAGE_REPORT. It can use for multilanguages or different formats. Default is \"en\"\n\n### translator: {Function}\nFor translations of FIRST, NEXT, ... Simple example\n```js\nvar translations = {\n\t'PREVIOUS' : 'Voorgaand',\n\t'NEXT' : 'Volgende',\n\t'FIRST' : 'Eerst',\n\t'LAST' : 'Laatste',\n\t'CURRENT_PAGE_REPORT' : 'Resulten {FromResult} - {ToResult} van {TotalResult}'\n};\n\nvar item = new ItemPaginator({\n\tprelink : '/',\n\tpageLinks : 5,\n\tcurrent : 5,\n\ttotalResult : 100,\n\ttranslator : function(str) {\n\t\treturn translations[str];\n\t}\n});\n```\n### pageParamName: {String}\nThe name of the page parameter. Default is \"page\"\n\n### slashSeparator: {Boolean}\nIndicate if using slash instead of equal sign, ie /page/2 instead of /?page=2, default is false.\n\n### template: {String | Function}\nThis can be a template string or a compiled template (function).\nThe compiled function will be called with an object as argument.\n\n\n## Acknowledgements\nTemplate engine is taking mostly from https://github.com/vanng822/ejs which is a fork of https://github.com/visionmedia/ejs\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvanng822%2Fpagination","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvanng822%2Fpagination","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvanng822%2Fpagination/lists"}