{"id":8418,"date":"2024-01-11T17:50:00","date_gmt":"2024-01-11T17:50:00","guid":{"rendered":"https:\/\/codehim.com\/?p=8418"},"modified":"2024-01-22T15:51:40","modified_gmt":"2024-01-22T10:51:40","slug":"dynamic-pagination-in-javascript","status":"publish","type":"post","link":"https:\/\/codehim.com\/vanilla-javascript\/dynamic-pagination-in-javascript\/","title":{"rendered":"Dynamic Pagination in JavaScript"},"content":{"rendered":"

This JavaScript code snippet simplifies the implementation of dynamic pagination in web applications. It comes with default settings for items per page, truncation, and visual elements like previous and next buttons, making it adaptable to various project requirements.<\/p>\n

The core functionality resides in the Pager<\/code> class, which simplifies navigation between pages. It handles user interactions, rendering, and dynamic page additions or removals. Additionally, the code supports event handling, allowing developers to respond to essential events such as initialization, rendering, and page changes.<\/p>\n

One user-friendly feature is the ability to choose different visual styles or “skins” for the pagination controls. With this option, developers can easily switch between styles, like Bootstrap or custom icons, to maintain a consistent look and feel across their web applications.<\/p>\n

How to Create Dynamic Pagination In Javascript<\/h2>\n

1. First of all, load the Bootstrap CSS<\/a>, Material Design Icons<\/a>, and Google Fonts by adding the following CDN links to the head tag of your HTML document.<\/p>\n

<link rel='stylesheet' href='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/4.0.0-beta\/css\/bootstrap.min.css'>\r\n<link rel='stylesheet' href='\/\/cdn.materialdesignicons.com\/1.7.22\/css\/materialdesignicons.min.css'>\r\n<link rel='stylesheet' href='https:\/\/fonts.googleapis.com\/css?family=Roboto+Condensed:400,700'>\r\n<link rel='stylesheet' href='https:\/\/fonts.googleapis.com\/css?family=Roboto:400,500'>\r\n<\/pre>\n
2. Create the HTML structure for pagination as follows. The key element for implementing pagination is the <div id=\"pager\"><\/div><\/code> element within the <div id=\"container\"><\/div><\/code>. This is where the pagination control will be generated and displayed on your web page.<\/p>\n
<main>\r\n <div class=\"container\">\r\n  <div class=\"row\">\r\n   <div class=\"col-sm-12\">\r\n    <h2>Dynamic Pagination<\/h2>\r\n    <div id=\"container\">\r\n     <div id=\"pager\"><\/div>\r\n     <div class=\"text-muted\" id=\"info\"><\/div>\r\n    <\/div>\r\n   <\/div>\r\n   \r\n  <\/div>\r\n <\/div>\r\n<\/main>\r\n<\/pre>\n
3. Use the following CSS to style the pagination. You can modify the CSS rules to customize the page buttons according to your needs.<\/p>\n
body {\r\n  margin: 0;\r\n  font-family: \"Roboto Condensed\";\r\n  font-weight: 400;\r\n  font-size: 16px;\r\n  color: #666;\r\n}\r\n\r\nmain {\r\n  margin-top: 10vh;\r\n}\r\n\r\nh2, small, .btn {\r\n  font-weight: 700;\r\n}\r\n\r\na, a:hover {\r\n  color: #0077db;\r\n}\r\n\r\nlabel {\r\n  font-weight: 400;\r\n}\r\n\r\n#container {\r\n  margin: 20px 0;\r\n}\r\n\r\n#pager {\r\n  margin-bottom: 20px;\r\n}\r\n#pager::after {\r\n  display: table;\r\n  clear: both;\r\n  content: \"\";\r\n}\r\n\r\n.form-control {\r\n  width: 150px;\r\n  margin-right: 20px;\r\n}\r\n\r\n.pg-pager {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n.pg-pager::after {\r\n  display: table;\r\n  clear: both;\r\n  content: \"\";\r\n}\r\n.pg-pager .pg-item {\r\n  list-style: outside none;\r\n  float: left;\r\n}\r\n.pg-pager .pg-item .pg-link, .pg-pager .pg-item.pg-ellipsis > span {\r\n  display: block;\r\n  min-width: 45px;\r\n  text-align: center;\r\n  font-weight: 700;\r\n  text-decoration: none;\r\n  padding: 6px 12px;\r\n  color: inherit;\r\n  border: 1px solid #ccc;\r\n  margin-left: -1px;\r\n}\r\n.pg-pager .pg-item .pg-link:hover, .pg-pager .pg-item.pg-ellipsis > span:hover {\r\n  color: inherit;\r\n  border-color: #ccc;\r\n  background-color: #ccc;\r\n}\r\n.pg-pager .pg-item.pg-active > a, .pg-pager .pg-item.pg-active > a:focus, .pg-pager .pg-item.pg-active > a:hover {\r\n  color: #fff;\r\n  border-color: #0077db;\r\n  background-color: #0077db;\r\n}\r\n.pg-pager .pg-item:first-child a {\r\n  border-radius: 3px 0 0 3px;\r\n}\r\n.pg-pager .pg-item:last-child a {\r\n  border-radius: 0 3px 3px 0;\r\n}\r\n.pg-pager .pg-item.pg-ellipsis > span {\r\n  cursor: not-allowed;\r\n}\r\n.pg-pager .pg-item.pg-ellipsis > span:hover {\r\n  color: inherit;\r\n  border-color: #ccc;\r\n  background-color: transparent;\r\n}\r\n.pg-pager .pg-item.pg-disabled {\r\n  cursor: not-allowed;\r\n}\r\n.pg-pager .pg-item.pg-disabled a {\r\n  opacity: 0.6;\r\n  pointer-events: none;\r\n}\r\n.pg-pager .pg-item.pg-disabled a:hover {\r\n  color: inherit;\r\n  border-color: #ccc;\r\n  background-color: transparent;\r\n}\r\n\r\n.btn {\r\n  border-radius: 3px;\r\n  font-size: 14px;\r\n  font-family: \"Roboto\";\r\n  font-weight: 500;\r\n}\r\n.btn.btn-primary {\r\n  border-color: #0077db;\r\n  background-color: #0077db;\r\n}\r\n.btn.btn-primary:hover {\r\n  background-color: #007fea;\r\n}\r\n.btn.btn-danger {\r\n  border-color: #fa424a;\r\n  background-color: #fa424a;\r\n}\r\n.btn.btn-danger:hover {\r\n  background-color: #fa5158;\r\n}\r\n\r\n.pagination {\r\n  margin: 0;\r\n  font-family: -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\r\n}<\/pre>\n
4. Finally, add the following JavaScript function to activate the dynamic pagination.<\/p>\n
(function(root) {\r\n\t\"use strict\";\r\n\tvar win = window,\r\n\t\tdoc = document,\r\n\t\tbody = doc.body;\r\n\r\n\t\/**\r\n     * Default configuration\r\n     * @typ {Object}\r\n     *\/\r\n\tvar defaultConfig = {\r\n\t\tlimit: 0,\r\n\t\toffset: 2,\r\n\t\tstartPage: 1,\r\n\t\thideDisabled: true,\r\n\t\tprevNext: true,\r\n\t\tprevText: \"&lsaquo;\",\r\n\t\tnextText: \"&rsaquo;\",\r\n\t\tfirstLast: false,\r\n\t\tfirstText: \"&laquo;\",\r\n\t\tlastText: \"&raquo;\",\t\t\r\n\t\tellipsisText: \"&hellip;\",\r\n\t\thashString: \"#\",\r\n\t\t\r\n\t\tclasses: {\r\n\t\t\tpager: \"pg-pager\",\r\n\t\t\titem: \"pg-item\",\r\n\t\t\tlink: \"pg-link\",\r\n\t\t\tprev: \"pg-prev\",\r\n\t\t\tnext: \"pg-next\",\r\n\t\t\tfirst: \"pg-first\",\r\n\t\t\tlast: \"pg-last\",\t\t\r\n\t\t\tactive: \"pg-active\",\r\n\t\t\tdisabled: \"pg-disabled\",\r\n\t\t\tellipsis: \"pg-ellipsis\",\r\n\t\t}\r\n\t};\r\n\r\n\t\/**\r\n     * Check is item is object\r\n     * @return {Boolean}\r\n     *\/\r\n\tvar isObject = function(val) {\r\n\t\treturn Object.prototype.toString.call(val) === \"[object Object]\";\r\n\t};\r\n\r\n\t\/**\r\n     * Check is item is array\r\n     * @return {Boolean}\r\n     *\/\r\n\tvar isArray = function(val) {\r\n\t\treturn Array.isArray(val);\r\n\t};\r\n\t\r\n\tvar closest = function(el, fn) {\r\n\t\treturn el && el !== body && (fn(el) ? el : closest(el.parentNode, fn));\r\n\t};\r\n\t\r\n\t\/**\r\n     * Merge objects (reccursive)\r\n     * @param  {Object} r\r\n     * @param  {Object} t\r\n     * @return {Object}\r\n     *\/\r\n\tvar extend = function(src, props) {\r\n\t\tfor (var prop in props) {\r\n\t\t\tif (props.hasOwnProperty(prop)) {\r\n\t\t\t\tvar val = props[prop];\r\n\t\t\t\tif (val && isObject(val)) {\r\n\t\t\t\t\tsrc[prop] = src[prop] || {};\r\n\t\t\t\t\textend(src[prop], val);\r\n\t\t\t\t} else {\r\n\t\t\t\t\tsrc[prop] = val;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t\treturn src;\r\n\t};\r\n\r\n\t\/**\r\n     * Iterator helper\r\n     * @param  {(Array|Object)}   arr     Any object, array or array-like collection.\r\n     * @param  {Function}         fn      Callback\r\n     * @param  {Object}           scope   Change the value of this\r\n     * @return {Void}\r\n     *\/\r\n\tvar each = function(arr, fn, scope) {\r\n\t\tvar n;\r\n\t\tif ( Number.isInteger(arr) ) {\r\n\t\t\tfor (n = 0; n < arr; n++) {\r\n\t\t\t\tfn.call(scope, n + 1, n);\r\n\t\t\t}\r\n\t\t} else {\r\n\t\t\tif (isObject(arr)) {\r\n\t\t\t\tfor (n in arr) {\r\n\t\t\t\t\tif (Object.prototype.hasOwnProperty.call(arr, n)) {\r\n\t\t\t\t\t\tfn.call(scope, arr[n], n);\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t} else {\r\n\t\t\t\tfor (n = 0; n < arr.length; n++) {\r\n\t\t\t\t\tfn.call(scope, arr[n], n);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t};\r\n\r\n\t\/**\r\n     * Add event listener to target\r\n     * @param  {Object} el\r\n     * @param  {String} e\r\n     * @param  {Function} fn\r\n     *\/\r\n\tvar on = function(el, e, fn) {\r\n\t\tel.addEventListener(e, fn, false);\r\n\t};\r\n\r\n\t\/**\r\n     * Create DOM element node\r\n     * @param  {String}   a nodeName\r\n     * @param  {Object}   b properties and attributes\r\n     * @return {Object}\r\n     *\/\r\n\tvar createNode = function(a, b) {\r\n\t\tvar d = doc.createElement(a);\r\n\t\tif (b && \"object\" == typeof b) {\r\n\t\t\tvar e;\r\n\t\t\tfor (e in b) {\r\n\t\t\t\tif (\"html\" === e) {\r\n\t\t\t\t\td.innerHTML = b[e];\r\n\t\t\t\t} else {\r\n\t\t\t\t\td.setAttribute(e, b[e]);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t\treturn d;\r\n\t};\r\n\t\r\n\tvar getPage = function(e) {\r\n\t\treturn parseInt(e.getAttribute(\"data-page\"), 10);\t\t\r\n\t};\r\n\r\n\r\n\tvar Pager = function(config) {\r\n\t\tthis.config = extend(defaultConfig, config);\r\n\r\n\t\tthis.container = this.config.container;\r\n\r\n\t\tif (typeof this.container === \"string\") {\r\n\t\t\tthis.container = document.querySelector(this.container);\r\n\t\t}\r\n\t\t\r\n\t\tif ( this.config.pages ) {\r\n\t\t\tthis.totalPages = this.config.pages;\r\n\t\t}\r\n\t\t\r\n\t\tthis.limit = this.config.limit;\r\n\t\tthis.offset = this.config.offset;\r\n\t\tthis.hideDisabled = this.config.hideDisabled;\r\n\t\t\r\n\t\tthis.bindEvents();\r\n\t\t\r\n\t\tif ( this.config.startPage ) {\r\n\t\t\tthis.goTo(this.config.startPage);\r\n\t\t}\t\t\r\n\t\t\r\n\t\tvar that = this;\r\n\t\tsetTimeout(function() {\r\n\t\t\tthat.emit(\"init\", that.currentPage);\r\n\t\t}, 10);\r\n\t};\r\n\t\r\n\tPager.prototype.bindEvents = function() {\r\n\t\t\r\n\t\tthis.events = {\r\n\t\t\tclick: this.click.bind(this)\r\n\t\t};\r\n\t\t\r\n\t\ton(this.container, \"click\", this.events.click);\r\n\t};\r\n\t\r\n\tPager.prototype.click = function(e) {\r\n\t\tvar that = this, target = e.target, o = that.config;\r\n\t\t\r\n\t\tvar item = closest(target, function(node) {\r\n\t\t\treturn node.item;\r\n\t\t});\r\n\t\t\r\n\t\tif ( item ) {\r\n\t\t\te.preventDefault();\r\n\t\t\r\n\t\t\tif (item.ellipsis) {\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\t\t\t\r\n\t\t\tthat.goTo(parseInt(item.dataset.page, 10))\r\n\t\t}\r\n\t};\t\r\n\t\r\n\tPager.prototype.render = function(pages) {\r\n\t\t\r\n\t\tvar that = this, o = that.config,\r\n\t\t\t\tnode = document.createDocumentFragment();\r\n\t\t\r\n\t\tif ( pages ) {\r\n\t\t\tthat.items = [];\r\n\t\t\tthat.totalPages = pages;\r\n\t\t\t\r\n\t\t\tif ( that.currentPage > that.totalPages ) {\r\n\t\t\t\tthat.currentPage = that.totalPages;\r\n\t\t\t}\r\n\t\t}\r\n\t\t\r\n\t\tif ( that.pager ) {\r\n\t\t\tthat.pager.className = o.classes.pager;\r\n\t\t} else {\r\n\t\t\tthat.pager = createNode(\"ul\", {\r\n\t\t\t\tclass: o.classes.pager\r\n\t\t\t});\r\n\t\t}\r\n\t\t\r\n\t\tvar items = that.truncate();\r\n\t\t\r\n\t\tif ( that.hideDisabled && that.currentPage === 1 ) {\r\n\t\t} else {\r\n\t\t\r\n\t\t\tif ( o.firstLast ) {\r\n\t\t\t\tthat.first = that.renderButton({\r\n\t\t\t\t\tclass: o.classes.first,\r\n\t\t\t\t\tcontent: o.firstText,\r\n\t\t\t\t\tpage: 1,\r\n\t\t\t\t\tnav: true,\r\n\t\t\t\t\tfirst: true\r\n\t\t\t\t});\r\n\r\n\t\t\t\tnode.appendChild(that.first);\r\n\t\t\t}\t\t\r\n\r\n\t\t\tif ( o.prevNext ) {\r\n\t\t\t\tthat.prev = that.renderButton({\r\n\t\t\t\t\tclass: o.classes.prev,\r\n\t\t\t\t\tcontent: o.prevText,\r\n\t\t\t\t\tpage: that.currentPage > 1 ? that.currentPage - 1 : 1,\r\n\t\t\t\t\tnav: true,\r\n\t\t\t\t\tprev: true\r\n\t\t\t\t});\r\n\r\n\t\t\t\tnode.appendChild(that.prev);\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\teach(items, function(item, i) {\r\n\t\t\tnode.appendChild(item);\r\n\t\t});\r\n\t\t\r\n\t\tif ( that.hideDisabled && that.currentPage === that.totalPages ) {\r\n\t\t} else {\r\n\t\t\tif ( o.prevNext ) {\r\n\t\t\t\tthat.next = that.renderButton({\r\n\t\t\t\t\tclass: o.classes.next,\r\n\t\t\t\t\tcontent: o.nextText,\r\n\t\t\t\t\tpage: that.currentPage < that.totalPages ? that.currentPage + 1 : that.totalPages,\r\n\t\t\t\t\tnav: true,\r\n\t\t\t\t\tnext: true\r\n\t\t\t\t});\r\n\r\n\t\t\t\tnode.appendChild(that.next);\r\n\t\t\t}\r\n\r\n\t\t\tif ( o.firstLast ) {\r\n\t\t\t\tthat.last = that.renderButton({\r\n\t\t\t\t\tclass: o.classes.last,\r\n\t\t\t\t\tcontent: o.lastText,\r\n\t\t\t\t\tpage: that.totalPages,\r\n\t\t\t\t\tnav: true,\r\n\t\t\t\t\tlast: true\r\n\t\t\t\t});\r\n\r\n\t\t\t\tnode.appendChild(that.last);\r\n\t\t\t}\t\r\n\t\t}\t\r\n\t\t\r\n\t\tthat.pager.innerHTML = \"\";\r\n\t\tthat.pager.appendChild(node);\r\n\r\n\t\tthat.container.appendChild(that.pager);\r\n\r\n\t\tthat.emit(\"render\");\r\n\t};\r\n\t\r\n\tPager.prototype.renderButton = function(obj) {\r\n\t\tvar that = this, o = that.config;\r\n\r\n\t\tvar item = createNode(\"li\", {\r\n\t\t\tclass: o.classes.item\r\n\t\t});\r\n\t\t\r\n\t\titem.dataset.page = obj.page;\r\n\t\t\r\n\t\tif ( obj.page === that.currentPage && !obj.ellipsis && !obj.nav) {\r\n\t\t\titem.classList.add(o.classes.active);\r\n\t\t}\r\n\r\n\t\tvar link = createNode(obj.ellipsis ? \"span\" : \"a\", {\r\n\t\t\tclass: !obj.ellipsis ? o.classes.link : \"\",\r\n\t\t\thtml: obj.content\r\n\t\t});\r\n\t\t\r\n\t\tif ( obj.class ) {\r\n\t\t\titem.classList.add(obj.class);\r\n\t\t}\r\n\t\t\r\n\t\tif ( obj.nav ) {\r\n\t\t\titem.nav = true;\r\n\t\t}\r\n\t\t\r\n\t\tif ( obj.ellipsis ) {\r\n\t\t\titem.ellipsis = true;\r\n\t\t} else {\r\n\t\t\titem.item = true;\r\n\t\t\tlink.href = o.hashString.replace(\"{page}\", obj.page).replace(\"{pages}\", that.totalPages);\r\n\t\t}\r\n\t\t\r\n\t\tif ( (obj.prev || obj.first) && that.currentPage === 1 ||\r\n\t\t\t \t (obj.next || obj.last) && that.currentPage === that.totalPages )\t{\r\n\t\t\titem.disabled = true;\r\n\t\t\titem.classList.add(o.classes.disabled);\r\n\t\t\r\n\t\t\tlink.tabIndex = -1;\r\n\t\t} else {\r\n\t\t\titem.disabled = false;\r\n\t\t}\r\n\r\n\t\titem.appendChild(link);\r\n\t\t\r\n\t\treturn item;\r\n\t};\r\n\t\r\n\tPager.prototype.goTo = function(page) {\r\n\t\t\r\n\t\tvar that = this, o = that.config;\r\n\t\t\r\n\t\tif ( o.ajax ) {\r\n\r\n\t\t\to.ajax.data = o.ajax.data || {}\r\n\r\n\t\t\to.ajax.data[o.ajax.param || \"page\"] = page;\r\n\r\n\t\t\t\/\/ https:\/\/stackoverflow.com\/questions\/316781\/how-to-build-query-string-with-javascript\/34209399#34209399\r\n\t\t\tvar esc = encodeURIComponent;\r\n\t\t\tvar query = Object.keys(o.ajax.data)\r\n\t\t\t\t\t.map(k => esc(k) + '=' + esc(o.ajax.data[k]))\r\n\t\t\t\t\t.join('&');\t\t\t\t\r\n\r\n\t\t\tvar request = new Request(o.ajax.url + \"?\" + query, {\r\n\t\t\t\t\tmethod: \"GET\", \r\n\t\t\t\t\theaders: new Headers()\r\n\t\t\t});\r\n\t\t\t\r\n\t\t\tif ( typeof o.ajax.before === \"function\" ) {\r\n\t\t\t\to.ajax.before.call(that, data);\r\n\t\t\t}\t\r\n\r\n\t\t\tfetch(request).then(function (response) { return response.json(); })\r\n\t\t\t\t.then(function (data) {\r\n\t\t\t\t\r\n\t\t\t\t\tthat.currentPage = page;\r\n\r\n\t\t\t\t\tif ( typeof o.ajax.success === \"function\" ) {\r\n\t\t\t\t\t\to.ajax.success.call(that, data);\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\tthat.render();\r\n\r\n\t\t\t\t\tthat.emit(\"change\", page);\r\n\t\t\t\t});\r\n\t\t} else {\r\n\t\t\t\r\n\t\t\tthat.currentPage = page;\r\n\t\t\tthat.render();\r\n\r\n\t\t\tthat.emit(\"change\", page);\t\t\t\t\r\n\t\t}\t\t\r\n\t};\r\n\t\r\n\tPager.prototype.truncate = function() {\r\n\r\n\t\tvar that = this;\r\n\t\tvar page = that.currentPage;\r\n\t\tvar pages = that.totalPages;\r\n\t\tvar delta = that.offset;\r\n\t\tvar offset = delta * 2;\r\n\t\tvar left = page - delta;\r\n\t\tvar right = page + delta;\r\n\t\tvar range = [];\r\n\t\tvar pager = [];\r\n\t\tvar k;\r\n\t\t\r\n\t\t\/\/ No need to truncate if the number of pages is low\r\n\t\tif (!this.limit || this.totalPages <= this.limit) {\r\n\t\t\teach(pages, function(index) {\r\n\t\t\t\tpager.push(that.renderButton({\r\n\t\t\t\t\tpage: index,\r\n\t\t\t\t\tcontent: index\r\n\t\t\t\t}));\r\n\t\t\t});\r\n\t\t} else {\r\n\t\t\tif ( page < (4 - delta) + offset ) {\r\n\t\t\t\tright = 3 + offset;\r\n\t\t\t} else if ( page > pages - ((3 - delta) + offset)  ) {\r\n\t\t\t\tleft = pages - (2 + offset);\r\n\t\t\t}\r\n\r\n\t\t\tfor (let i = 1; i <= pages; i++) {\r\n\t\t\t\tif (i == 1 || i == pages || i >= left && i <= right) {\r\n\t\t\t\t\trange.push(that.renderButton({\r\n\t\t\t\t\t\tpage: i,\r\n\t\t\t\t\t\tcontent: i\r\n\t\t\t\t\t}));\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\teach(range, (link) => {\r\n\t\t\t\tvar page = getPage(link);\r\n\t\t\t\tif (k) {\r\n\t\t\t\t\tvar p = getPage(k);\r\n\t\t\t\t\tif (page - p == 2) {\r\n\t\t\t\t\t\tpager.push(that.renderButton({\r\n\t\t\t\t\t\t\tpage: p + 1,\r\n\t\t\t\t\t\t\tcontent: p + 1\r\n\t\t\t\t\t\t}));\r\n\t\t\t\t\t} else if (page - p != 1) {\r\n\t\t\t\t\t\tpager.push(that.renderButton({\r\n\t\t\t\t\t\t\tclass: that.config.classes.ellipsis,\r\n\t\t\t\t\t\t\tcontent: that.config.ellipsisText,\r\n\t\t\t\t\t\t\tellipsis: true\r\n\t\t\t\t\t\t}));\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t\tpager.push(link);\r\n\t\t\t\tk = link;\r\n\t\t\t});\r\n\t\t}\r\n\r\n\t\treturn pager;\r\n\t};\t\r\n\t\r\n\tPager.prototype.add = function() {\r\n\t\tthis.render(this.totalPages + 1);\r\n\r\n\t\tthis.emit(\"add\");\r\n\t};\r\n\r\n\tPager.prototype.remove = function(num) {\r\n\t\tif (this.totalPages > 1) {\r\n\t\t\tthis.render(this.totalPages - 1);\r\n\t\t\t\r\n\t\t\tthis.emit(\"remove\");\r\n\t\t}\r\n\t};\t\r\n\t\r\n\tPager.prototype.on = function(event, fct) {\r\n\t\tthis.events[event] = this.events[event] || [];\r\n\t\tthis.events[event].push(fct);\r\n\t};\r\n\t\r\n\tPager.prototype.off = function(event, fct) {\r\n\t\tif (event in this.events === false) return;\r\n\t\tthis.events[event].splice(this.events[event].indexOf(fct), 1);\r\n\t};\r\n\t\r\n\tPager.prototype.emit = function(event \/* , args... *\/) {\r\n\t\tif (event in this.events === false) return;\r\n\t\tfor (var i = 0; i < this.events[event].length; i++) {\r\n\t\t\tthis.events[event][i].apply(\r\n\t\t\t\tthis,\r\n\t\t\t\tArray.prototype.slice.call(arguments, 1)\r\n\t\t\t);\r\n\t\t}\r\n\t};\r\n\t\r\n\tPager.prototype.set = function(prop, value) {\r\n\t\tthis[prop] = value;\r\n\t};\t\r\n\t\r\n\tPager.prototype.setLimit = function(limit) {\r\n\t\tthis.limit = parseInt(limit, 10);\r\n\t};\r\n\t\r\n\tPager.prototype.setOffset = function(offset) {\r\n\t\tthis.offset = parseInt(offset, 10);\r\n\t};\r\n\t\r\n\tPager.prototype.getLimit = function() {\r\n\t\treturn this.limit;\r\n\t};\r\n\t\r\n\tPager.prototype.getOffset = function() {\r\n\t\treturn this.offset;\r\n\t};\t\r\n\r\n\troot.Pager = Pager;\r\n})(this);\r\n\r\nconst config = {\r\n\tcontainer: \"#pager\",\r\n\tlimit: 10,\r\n\t\/\/ startPage: 10,\r\n\tfirstLast: true,\r\n\thideDisabled: false,\r\n\thashString: \"?page={page}\",\r\n\tprevText: '<span class=\"mdi mdi-chevron-left\"><\/span>',\r\n\tnextText: '<span class=\"mdi mdi-chevron-right\"><\/span>',\r\n\tfirstText: '<span class=\"mdi mdi-chevron-double-left\"><\/span>',\r\n\tlastText: '<span class=\"mdi mdi-chevron-double-right\"><\/span>',\t\r\n\tellipsisText: '<span class=\"mdi mdi-dots-horizontal\"><\/span>',\t\r\n};\r\n\r\nconst pager = new Pager(config)\r\npager.render(20);\r\n\r\n\r\n\/* DEMO STUFF *\/\r\nconst $ = el => document.getElementById(el);\r\nconst $$ = el => document.querySelectorAll(el);\r\n\r\nconst classes = pager.config.classes;\r\nconst limit = $(\"limit\");\r\nconst offset = $(\"offset\");\r\nconst pages = $(\"pages\");\r\nconst page = $(\"page\");\r\nconst info = $(\"info\");\r\nconst trunc = $(\"truncation\");\r\nconst truncs = $$(\".truncation\");\r\nconst hide = $(\"hideDisabled\");\r\nconst hides = $$(\".hide-disabled\");\r\nconst skin = $(\"skin\");\r\nconst skins = $$(\".skin\");\r\n\r\npager.on(\"init\", init);\r\n\r\npager.on(\"render\", update)\r\n\r\npager.on(\"change\", update);\r\n\r\npager.on(\"add\", update);\r\n\r\npager.on(\"remove\", update);\r\n\r\nskin.addEventListener(\"change\", changeSkin, false);\r\n\r\nhide.addEventListener(\"change\", e => {\r\n\tvar input = e.target;\r\n\tvar val = parseInt(input.value, 10);\r\n\r\n\tpager.set(\"hideDisabled\", val ? true : false);\r\n\tpager.render();\r\n\r\n}, false);\r\n\r\ntrunc.addEventListener(\"change\", e => {\r\n\tvar input = e.target;\r\n\tvar val = parseInt(input.value, 10);\r\n\t\r\n\tvar shitTonsOfLinks = false;\r\n\t\r\n\tif ( !val && parseInt(pages.value, 10) >= 1000 ) {\r\n\t\tshitTonsOfLinks = !confirm(\"You have a shit-ton of pages!! Are you sure you want to disable truncation and render all the links?\");\r\n\t}\r\n\t\r\n\tif ( !shitTonsOfLinks ) {\r\n\t\tpager.setLimit(val ? limit.value : val);\r\n\t\tpager.render();\r\n\r\n\t\tlimit.disabled = !val;\r\n\t\toffset.disabled = !val;\r\n\t} else {\r\n\t\ttruncs[0].checked = true;\r\n\t}\r\n}, false);\r\n\r\npages.addEventListener(\"change\", e => {\r\n\tvar max = parseInt(pages.value, 10);\r\n\tvar val = parseInt(page.value, 10);\r\n\tpager.render(max);\r\n\tpage.max = max;\r\n\t\r\n\tif ( val > max ) {\r\n\t\tpage.value = max\r\n\t}\r\n}, false);\r\n\r\npage.addEventListener(\"change\", e => {\r\n\tpager.goTo(parseInt(page.value, 10));\r\n}, false);\r\n\r\nlimit.addEventListener(\"change\", e => {\r\n\tpager.setLimit(limit.value);\r\n\tpager.render();\r\n}, false);\r\n\r\noffset.addEventListener(\"change\", e => {\r\n\tpager.setOffset(offset.value);\r\n\tpager.render();\r\n}, false);\r\n\r\nfunction init() {\r\n\t\r\n\tlimit.disabled = !truncs[0].checked;\r\n\toffset.disabled = !truncs[0].checked;\t\r\n\t\r\n\tskins[0].checked = true;\r\n\thides[0].checked = true;\r\n\ttruncs[0].checked = true;\r\n\t\r\n\tpages.value = 20;\r\n\tpage.value = 1;\r\n\tpage.max = 20;\r\n\tlimit.value = 10;\r\n\toffset.value = 2;\r\n\tupdate();\r\n}\r\n\r\nfunction update() {\r\n\tpage.value = pager.currentPage;\r\n\tinfo.textContent = `Page ${pager.currentPage} of ${pager.totalPages}`;\r\n}\r\n\r\nfunction changeSkin(e) {\r\n\tvar val = e.target.value;\r\n\t\r\n\tif ( val === \"bootstrap\" ) {\r\n\t\tpager.config.prevText = \"&lsaquo;\";\r\n\t\tpager.config.nextText = \"&rsaquo;\";\r\n\t\tpager.config.firstText = \"&laquo;\";\r\n\t\tpager.config.lastText = \"&raquo;\";\r\n\t\tpager.config.ellipsisText = \"&hellip;\";\r\n\t\t\t\r\n\t\tpager.config.classes = {\r\n\t\t\tpager: \"pagination\",\r\n\t\t\titem: \"page-item\",\r\n\t\t\tlink: \"page-link\",\r\n\t\t\tprev: \"page-item\",\r\n\t\t\tnext: \"page-item\",\r\n\t\t\tfirst: \"page-item\",\r\n\t\t\tlast: \"page-item\",\t\t\r\n\t\t\tactive: \"active\",\t\t\r\n\t\t\tdisabled: \"disabled\",\r\n\t\t\tellipsis: \"page-link\",\r\n\t\t};\r\n\t} else {\r\n\t\tpager.config.classes = classes;\r\n\tpager.config.prevText = '<span class=\"mdi mdi-chevron-left\"><\/span>';\r\n\tpager.config.nextText = '<span class=\"mdi mdi-chevron-right\"><\/span>';\r\n\tpager.config.firstText = '<span class=\"mdi mdi-chevron-double-left\"><\/span>';\r\n\tpager.config.lastText = '<span class=\"mdi mdi-chevron-double-right\"><\/span>';\r\n\tpager.config.ellipsisText = '<span class=\"mdi mdi-dots-horizontal\"><\/span>';\r\n\t}\r\n\r\n\tpager.render();\r\n}<\/pre>\n
That’s all! hopefully, you have successfully created Dynamic Pagination in JavaScript. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This JavaScript code snippet simplifies the implementation of dynamic pagination in web applications. It comes with default settings for items…<\/p>\n","protected":false},"author":1,"featured_media":8432,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[116],"tags":[],"class_list":["post-8418","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vanilla-javascript"],"acf":[],"yoast_head":"\nDynamic Pagination in JavaScript — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free JavaScript code snippet to create dynamic pagination. You can view demo and download the source code for the pagination.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/vanilla-javascript\/dynamic-pagination-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dynamic Pagination in JavaScript — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free JavaScript code snippet to create dynamic pagination. You can view demo and download the source code for the pagination.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/vanilla-javascript\/dynamic-pagination-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-11T17:50:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T10:51:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Dynamic-Pagination-in-JavaScript.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/dynamic-pagination-in-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/dynamic-pagination-in-javascript\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Dynamic Pagination in JavaScript\",\"datePublished\":\"2024-01-11T17:50:00+00:00\",\"dateModified\":\"2024-01-22T10:51:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/dynamic-pagination-in-javascript\/\"},\"wordCount\":253,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/dynamic-pagination-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Dynamic-Pagination-in-JavaScript.png\",\"articleSection\":[\"Vanilla JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/vanilla-javascript\/dynamic-pagination-in-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/dynamic-pagination-in-javascript\/\",\"url\":\"https:\/\/codehim.com\/vanilla-javascript\/dynamic-pagination-in-javascript\/\",\"name\":\"Dynamic Pagination in JavaScript — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/dynamic-pagination-in-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/dynamic-pagination-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Dynamic-Pagination-in-JavaScript.png\",\"datePublished\":\"2024-01-11T17:50:00+00:00\",\"dateModified\":\"2024-01-22T10:51:40+00:00\",\"description\":\"Here is a free JavaScript code snippet to create dynamic pagination. You can view demo and download the source code for the pagination.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/dynamic-pagination-in-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/vanilla-javascript\/dynamic-pagination-in-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/dynamic-pagination-in-javascript\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Dynamic-Pagination-in-JavaScript.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Dynamic-Pagination-in-JavaScript.png\",\"width\":1280,\"height\":960,\"caption\":\"Dynamic Pagination in JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/dynamic-pagination-in-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vanilla JavaScript\",\"item\":\"https:\/\/codehim.com\/category\/vanilla-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Dynamic Pagination in JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Dynamic Pagination in JavaScript — CodeHim","description":"Here is a free JavaScript code snippet to create dynamic pagination. You can view demo and download the source code for the pagination.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/vanilla-javascript\/dynamic-pagination-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Dynamic Pagination in JavaScript — CodeHim","og_description":"Here is a free JavaScript code snippet to create dynamic pagination. You can view demo and download the source code for the pagination.","og_url":"https:\/\/codehim.com\/vanilla-javascript\/dynamic-pagination-in-javascript\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-11T17:50:00+00:00","article_modified_time":"2024-01-22T10:51:40+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Dynamic-Pagination-in-JavaScript.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/vanilla-javascript\/dynamic-pagination-in-javascript\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/dynamic-pagination-in-javascript\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Dynamic Pagination in JavaScript","datePublished":"2024-01-11T17:50:00+00:00","dateModified":"2024-01-22T10:51:40+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/dynamic-pagination-in-javascript\/"},"wordCount":253,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/dynamic-pagination-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Dynamic-Pagination-in-JavaScript.png","articleSection":["Vanilla JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/vanilla-javascript\/dynamic-pagination-in-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/vanilla-javascript\/dynamic-pagination-in-javascript\/","url":"https:\/\/codehim.com\/vanilla-javascript\/dynamic-pagination-in-javascript\/","name":"Dynamic Pagination in JavaScript — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/dynamic-pagination-in-javascript\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/dynamic-pagination-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Dynamic-Pagination-in-JavaScript.png","datePublished":"2024-01-11T17:50:00+00:00","dateModified":"2024-01-22T10:51:40+00:00","description":"Here is a free JavaScript code snippet to create dynamic pagination. You can view demo and download the source code for the pagination.","breadcrumb":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/dynamic-pagination-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/vanilla-javascript\/dynamic-pagination-in-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/vanilla-javascript\/dynamic-pagination-in-javascript\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Dynamic-Pagination-in-JavaScript.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/09\/Dynamic-Pagination-in-JavaScript.png","width":1280,"height":960,"caption":"Dynamic Pagination in JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/vanilla-javascript\/dynamic-pagination-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Vanilla JavaScript","item":"https:\/\/codehim.com\/category\/vanilla-javascript\/"},{"@type":"ListItem","position":3,"name":"Dynamic Pagination in JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":5623,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/8418","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=8418"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/8418\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/8432"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=8418"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=8418"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=8418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}