{"_id":"573a18907f35072900c850a0","project":"5730eb946b55e93400b32aae","version":{"_id":"5730eb946b55e93400b32ab1","project":"5730eb946b55e93400b32aae","__v":4,"createdAt":"2016-05-09T19:57:08.646Z","releaseDate":"2016-05-09T19:57:08.646Z","categories":["5730eb946b55e93400b32ab2","5734b41b9c2cf82900b243ee","5734c6986d9a38200073dd32","5734cea86d9a38200073dd5a"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"0.3.25","version":"0.3.25"},"__v":4,"parentDoc":null,"user":"5730eaf719c1e00e006d215f","category":{"_id":"5734b41b9c2cf82900b243ee","__v":0,"project":"5730eb946b55e93400b32aae","version":"5730eb946b55e93400b32ab1","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-05-12T16:49:31.689Z","from_sync":false,"order":9999,"slug":"components","title":"Components"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-05-16T18:59:28.324Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":9,"body":"Pagination will render pagination with bootstrap classes. The el must be a `ul`.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Example Usage\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<ul class=\\\"pagination-test\\\"></ul>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Pull in the library\\nconst UI = require('jibe-juice');\\n\\n// Instantiate a component, pass the selector of the container to insert component into and the opts\\nconst pagination = new UI.Pagination('.pagination-test', {\\n  cssStyle: 'pagination',\\n  edges: 0,\\n  hrefTextPrefix: '#?page=',\\n  itemsOnPage: 10,\\n  nextText: '<span class=\\\"icon icon-arrow_forward icon-arrow\\\"></span>',\\n  onPageClick(pageNumber, event) {\\n    alert('Page number: ' + pageNumber);\\n  },\\n  prevText: '<span class=\\\"icon icon-arrow_back icon-arrow\\\"></span>'\\n});\\n\\n// Render the DOM for the Pagination component\\npagination.render();\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"params\"\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Name\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Default\",\n    \"h-3\": \"Description\",\n    \"0-0\": \"el\",\n    \"1-0\": \"opts\",\n    \"1-3\": \"A catch all for various options. See the opts table below for options specific to this component.\",\n    \"1-1\": \"object\",\n    \"1-2\": \"{}\",\n    \"0-1\": \"string\",\n    \"0-2\": \"undefined\",\n    \"0-3\": \"A string of the selector for the element to put the component in\"\n  },\n  \"cols\": 4,\n  \"rows\": 2\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"opts\"\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Name\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Default\",\n    \"h-3\": \"Description\",\n    \"h-4\": \"Description\",\n    \"0-0\": \"currentPage\",\n    \"0-2\": \"`1`\",\n    \"0-1\": \"number\",\n    \"0-3\": \"The page we are currently on\",\n    \"1-0\": \"edges\",\n    \"1-1\": \"number\",\n    \"1-2\": \"`0`\",\n    \"1-3\": \"How many page numbers are visible at the beginning and ending of pagination\",\n    \"2-0\": \"hrefTextPrefix\",\n    \"2-3\": \"A string to prefix to the front of all hrefs\",\n    \"2-2\": \"`'#page-'`\",\n    \"2-1\": \"string\",\n    \"3-0\": \"items\",\n    \"3-1\": \"number\",\n    \"3-2\": \"`100`\",\n    \"3-3\": \"The total number of items in the list\",\n    \"4-0\": \"itemsOnPage\",\n    \"4-1\": \"number\",\n    \"4-2\": \"`10`\",\n    \"4-3\": \"The number of items to display per page\",\n    \"5-0\": \"nextText\",\n    \"5-1\": \"string\",\n    \"5-3\": \"The text to display in the next button\",\n    \"5-2\": \"`'Next'`\",\n    \"6-0\": \"onPageClick\",\n    \"6-3\": \"A function to call when the page is changed\",\n    \"6-2\": \"`undefined`\",\n    \"6-1\": \"function\",\n    \"7-0\": \"prevText\",\n    \"7-1\": \"string\",\n    \"7-2\": \"`'Prev'`\",\n    \"7-3\": \"The text to display in the previous button\"\n  },\n  \"cols\": 4,\n  \"rows\": 8\n}\n[/block]","excerpt":"","slug":"pagination","type":"basic","title":"Pagination"}
Pagination will render pagination with bootstrap classes. The el must be a `ul`. [block:api-header] { "type": "basic", "title": "Example Usage" } [/block] [block:code] { "codes": [ { "code": "<ul class=\"pagination-test\"></ul>", "language": "html" } ] } [/block] [block:code] { "codes": [ { "code": "// Pull in the library\nconst UI = require('jibe-juice');\n\n// Instantiate a component, pass the selector of the container to insert component into and the opts\nconst pagination = new UI.Pagination('.pagination-test', {\n cssStyle: 'pagination',\n edges: 0,\n hrefTextPrefix: '#?page=',\n itemsOnPage: 10,\n nextText: '<span class=\"icon icon-arrow_forward icon-arrow\"></span>',\n onPageClick(pageNumber, event) {\n alert('Page number: ' + pageNumber);\n },\n prevText: '<span class=\"icon icon-arrow_back icon-arrow\"></span>'\n});\n\n// Render the DOM for the Pagination component\npagination.render();", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "params" } [/block] [block:parameters] { "data": { "h-0": "Name", "h-1": "Type", "h-2": "Default", "h-3": "Description", "0-0": "el", "1-0": "opts", "1-3": "A catch all for various options. See the opts table below for options specific to this component.", "1-1": "object", "1-2": "{}", "0-1": "string", "0-2": "undefined", "0-3": "A string of the selector for the element to put the component in" }, "cols": 4, "rows": 2 } [/block] [block:api-header] { "type": "basic", "title": "opts" } [/block] [block:parameters] { "data": { "h-0": "Name", "h-1": "Type", "h-2": "Default", "h-3": "Description", "h-4": "Description", "0-0": "currentPage", "0-2": "`1`", "0-1": "number", "0-3": "The page we are currently on", "1-0": "edges", "1-1": "number", "1-2": "`0`", "1-3": "How many page numbers are visible at the beginning and ending of pagination", "2-0": "hrefTextPrefix", "2-3": "A string to prefix to the front of all hrefs", "2-2": "`'#page-'`", "2-1": "string", "3-0": "items", "3-1": "number", "3-2": "`100`", "3-3": "The total number of items in the list", "4-0": "itemsOnPage", "4-1": "number", "4-2": "`10`", "4-3": "The number of items to display per page", "5-0": "nextText", "5-1": "string", "5-3": "The text to display in the next button", "5-2": "`'Next'`", "6-0": "onPageClick", "6-3": "A function to call when the page is changed", "6-2": "`undefined`", "6-1": "function", "7-0": "prevText", "7-1": "string", "7-2": "`'Prev'`", "7-3": "The text to display in the previous button" }, "cols": 4, "rows": 8 } [/block]