Javascript Pagination

Developer
Dmitriy Karpov
Size
6,333 Kb
Views
44,528
  1. Javascript Pagination Previews
  2. Javascript Pagination HTML Codes
  3. Javascript Pagination CSS Codes
  4. Javascript Pagination JS Codes

How do I make an javascript pagination?

What is a javascript pagination? How do you make a javascript pagination? This script and codes were developed by Dmitriy Karpov on 20 August 2022, Saturday.

Javascript Pagination Previews
IQ Test

Javascript Pagination - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Javascript Pagination</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="pagination"></div> <script src="js/index.js"></script>
</body>
</html>

Javascript Pagination - Script Codes CSS Codes

html { height: 100%; width: 100%; background-color: #D7D7D7; background-image: -webkit-radial-gradient(contain, #F2F2F2, #D1D1D1); background-image: -moz-radial-gradient(contain, #F2F2F2, #D1D1D1); background-image: -ms-radial-gradient(contain, #F2F2F2, #D1D1D1); background-image: -o-radial-gradient(contain, #F2F2F2, #D1D1D1); background-image: radial-gradient(contain, #F2F2F2, #D1D1D1);
}
body { margin: 0; height: 100%; width: 100%; text-align: center; font-family: Arial, sans-serif; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAMAAACahl6sAAAAKlBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKE86IAAAADnRSTlMAAQIDBAUGBwgJCgsMDRK8QVgAAAukSURBVHja3Z3XYuM6DEQPKXZy/v937wMoZXPjJC6yLWUftsVWAUFgMChEyoLhQdgvSQIQQqEzhFBbAFELyKPYxfoxIqWy4DKyqyixXgFalkBQgaXYLQIEAYwheWCAFzi7ouQE1KYMEIVIdhVBt4cVZHqBjm9Atpt6OQLrp4boQgN7XrGU+arLAqgiUPDQRFxFYM9PV5hiGWTQIqeQUW8sGUl0AmL07nBiQVSYkoGsYS/eBgtoNFrAKQkUZM8k0OiQ1BVxqNi/BUIFQUML0lwaoWaXzRmIgGJhifagKogFIupzFQFU7I+hJNUpZ+jghFButvbkLEQQUetX/aCXWCSgr4qyILxpx6Y7QwCOOrDPerQQIMeFTEYUFLvJSMEHRGhjaouLQ9AGBBZ7MQmhBFkRaQjJBSRagQSFtH2wBEm19iiU0dRkEZ0t9bYyXah0aUAogEgSdIEJJ9vDQ9diYlIEuXnJplEIjIii2KRc6nZTxyoCwWLiDBBlywiIgOsSpZNUionRDwFdWVIaZEZztnJp1WAlLS6DxGCxNYpFwDI3MKZeFYRDgE8Ayd7di2Fr2wExQODwrDsaRRJTO9u8aESj0BhSJ87tXQckMkgdSAn7yhAoQyeMLDVYXIbaqA2/2gYViRJBFKVtGZvITvNlxtStSMYDqFOxl4OEcFORR0TURU1TbextqpkhMMlLGtiVbO/bXwrq8tvmt+1ZSPNTiSSge9C8I+TcQPSh2pRgmc9ctW5Ss6uh26o4RmBeUq64uQ3oQVFR68Oq2JoURrf93VULg6ixvVdXlwOpZDo1Efc1gfE2E8jYbs8q+OSF5ME1JGJzmRgrdfUOGh9ugjH3phDN7u7baklV0cIo2+U/jE5loUR720pg215IU9hLxNSpDk2VIAFNPck8XgDIg/OZ2Zi3nzWEnMzUTRFPcYBpY4aQ0FISijTsPYIObKztB3m+fRAEqII4ZMabAkEomxk/qi7ev/f0OvjBdssp8gC4wggmV7OVRJSKRE4gYhhkNXCgpcSCukyRpW4eU7lIgiYYlLAJXomRDOOJSORDSRKhLZAYBDw1YyvrAS1ESQ0yHYJud2+g1mAZAikhyqgLgMsZyReSGm3ZXFBnU6uhgaeIhprfXSjxNqHcCmpGA6qKVqdgaxs1AGfWXtAVolBqJrvSYIhYaQbfs3IeY/pLAk3QJcimiUzpX4+hpl8cweR0Z3gydg5PdHN4kuzNleaDh7EitKo292hdVEeZ+80BC4kI878KZLt6BzqNxe4eSEQWcH1dPlv/qekJyooFHnUB9q2GREWbrjSAwHSckGEgDMR0hIGpyDK33DJ/a4h4Gb/1p+I3NEAqfsLZacB71jK9/moQF3nxITJ1hRFk9hXchACAL74gVbMKvXumYCCaATUAGD60W27VJmUoaH4+DTNpyKFM3+Bvz/bVjEg0191tQj0yKN4jOjuCIQNX1JDGunUNFKrDAMeCkhtqFTS3UhIiEdwQ0tD6xRkZqumx2MDfExv85PW/eMqyo6fU3vBhyl4UlIRDAaFKkNnaJvCdLtqHjto6h7nKQNUKDAs0W0mUVEWDIoEUUWhssXeT1GEZF5icfjOTc0rq50JMwj4knwH2BYF3GxqQUJtXBpcC4Xlhw9mRySbTF6HsCyRSvYFEKp9JpPKVRPoDNJDB3QfMxMF2veltL/PxRZ+vmDe/4GzHVfCSgjd+sqESQIqV6nAUUWtCqFMAyhCuLormv6ohNJdD8OS5TB7ISlrMiSforvvQiBuu67WjLpBf12eaACqFIqmagh6a5GmdIjQWM4F1GjJN2DQ9uRnAJytyfVHcdtoY/bNJvZQjSHfnCOpeOYIQm6RuIQcUkkUr5j8XimF1LWSGxTjP2bHtvh3b2KKj8Ina6xpjCGJdt/AaK5iRFW/KL+0fwbAnZH1z8hFyRIzEoNE+vMs/plJNH6znB8hZ3T0e+oRtoWqskCgFW+8gVCQRkrxnzUfLck6KHuHJ0t2cTvqa7crXZ7vsZYqogiH1sclGCVww8NIMxwwvgJCm9AOIhLqhX2Oc04we5/YrTqKAEipDaRnKDMAt4MF0RWue52PLlIgsTIJMgUFh4FXNZBDMI+FMVVZi3VCkfWSY/0m2KQhj3qmV8AElLJ5uO8Z0/4bj7enh+D6punYpXcBYwUIf5k0XzU9KDDNLitpyFHbtpAid5d/XvJ3I2FFyrwl6XhFInpBmuGyzn4arH/DSn01Ovs7k+Odtv1sz5Q9l635BffF1qC/PZUGVQB5Cbq5zp0LxIPJ3pDv34Kd2QAaYKxX16b7xUb6T08PebdkOFKw+UgM5WTXhNdZIEUQdGBhqFsYGNTIQLEy1/WsrXjwQx8ZnTsZtJi7MVQQYa4qwmAYZXGFihhm0VuTMe/i55sn0oEMKE0oINUgQBcHxkUU7KXGiJuHZEPd9PuKdBaUXKzreKMQqDdvsu0R2r0C5u6br2uV03VuzhTuGJ3eiif4Imrgmha8wdfDaFD4nKy/7ttSRD1G294hyp2qIM1Zhtk7+YiL/QjVjWlnwV+dfn/OicQ8cnw7AcT2QTMjvTyZ8hJXTBHlvCNPYh6FVcSJAqcE1KkFNWlB2ky3ZxA9DNdWId9OkdfX1R6+qbTvOkzyWHj9IXPQ42/fU8jzZl6YbdFXQ67rKTcJvURUUNaq+BHrt6kBvZ17m6mLIfd3/AVP/91KUR+0rvKKw/1OJ37vSUPWaNJSIUGlrAxUrIpCszvffApSjl8HX61oJOSjLfjPo4ZzJkAsBxTno0N818aSVQBdAxLeur+3n+l7SB/BX6ho5S/r5G2Lugxl7Y2HorruIM7aKXLIynJEMusSXvzIT/lRi4qpBCPvxEk9Md18BK09S13xcWuQ2k3OMBp4dqiF/ry92e9QXP79l46D9OXfwwzuEyzd2xPWn1KUfv370usCdn0px3UOluC9ur/4lEfTiXPn9VdCn4KevQaFXs0ZHd+97tfqXt097+QMIXmuI9eS25tc4f446luJWXX3DcIbdsz91LWk8bjGvDRv4kTmLs2aEA1SMXfKC8VcvmD4DEM45cuMrj8JhKxluDeD+Bj2XOVT7ff61/f77GY4coc92F9m9zfi2PYzvv2mLoyUD7+xk4EjDZh5SxW+KmsrRi5q+OLrbxuGm94/D/War8rwUUs17j2lNP4yKPEnh+zXC+bfw+Chj2O5A+rypS3f/ZTx2w1Ew6Q1ofn6BSIjBgHxZpJENfr69L2GvkoJLQcoDAwveFu3zR/i5iSbP0EL1S0DMcxtPX1j09brRQE9m785VN/4Tq3FGouGCBj6VPHtGxfV3uOcAnej7GITDZqBuJaI4bAHAjTMbz5V6+2H+2NnCju8TDBd/esYpA3/kzI524MbC28zyesZKv3TGij34O+dWXR8Rv9d07ndm0lY0dYQGvMfqwv4AOpnhyp+A8OgpCdf4Bi7jHspjvLHA4dtinIcyPIea47jNshi/uRTpyKMQ33+84U7j0zh4W8jVefk/cfBTBn/IcbL39PFyuDzznUiAHdN4720MP1+5cro4tPnM5yR9tnIHGCs1fjxB81pXvGcJzWNpusco2JP1sf4w4e20JeT/hz8nH4W9Tenj2NOXbwgU/shxXAsHp3b7l9rx78jb43VG3snEHrHY8p5kHULj/EVOOmXo8U9GanxkpE4wp+nqxtOTDlj/PCSJk8zu/p0iP9sx7N9NM+JoTdB3V+Dsd4j1j5XP8emHfJ1r8ur3oeffOQ9x91ze2/zomyat7b9ML6xef+aZAU8eePY6MHpoL3cTMNpXr9LTW0a+A7fPCTvfUTN0jAThDl0Y7z4AZUeC/0SD5n6MN44za+ahMOLJrcCvgzNPrqHpL8sTPZEIcXfPUr6nNJc3H1TX95oKy9kx7+YVDskk3EU+7TNbe4/plA/1JV8g9U5akPKiISz+2VPg/g5AedMpuPuTSkfio8sDhuVIYfdjOaBjkfD3Hwv9H6hF+t8WGk8EAAAAAElFTkSuQmCC);
}
body:before { content: ''; display: inline-block; width: 0; height: 100%; vertical-align: middle;
}
#pagination { display: inline-block; vertical-align: middle; border-radius: 4px; padding: 1px 2px 4px 2px; border-top: 1px solid #AEAEAE; border-bottom: 1px solid #FFFFFF; background-color: #DADADA; background-image: -webkit-linear-gradient(top, #DBDBDB, #E2E2E2); background-image: -moz-linear-gradient(top, #DBDBDB, #E2E2E2); background-image: -ms-linear-gradient(top, #DBDBDB, #E2E2E2); background-image: -o-linear-gradient(top, #DBDBDB, #E2E2E2); background-image: linear-gradient(top, #DBDBDB, #E2E2E2);
}
#pagination a, #pagination i { display: inline-block; vertical-align: middle; width: 22px; color: #7D7D7D; text-align: center; font-size: 10px; padding: 3px 0 2px 0; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -o-user-select:none; user-select:none;
}
#pagination a { margin: 0 2px 0 2px; border-radius: 4px; border: 1px solid #E3E3E3; cursor: pointer; box-shadow: inset 0 1px 0 0 #FFF, 0 1px 2px #666; text-shadow: 0 1px 1px #FFF; background-color: #E6E6E6; background-image: -webkit-linear-gradient(top, #F3F3F3, #D7D7D7); background-image: -moz-linear-gradient(top, #F3F3F3, #D7D7D7); background-image: -ms-linear-gradient(top, #F3F3F3, #D7D7D7); background-image: -o-linear-gradient(top, #F3F3F3, #D7D7D7); background-image: linear-gradient(top, #F3F3F3, #D7D7D7);
}
#pagination i { margin: 0 3px 0 3px;
}
#pagination a.current { border: 1px solid #E9E9E9; box-shadow: 0 1px 1px #999; background-color: #DFDFDF; background-image: -webkit-linear-gradient(top, #D0D0D0, #EBEBEB); background-image: -moz-linear-gradient(top, #D0D0D0, #EBEBEB); background-image: -ms-linear-gradient(top, #D0D0D0, #EBEBEB); background-image: -o-linear-gradient(top, #D0D0D0, #EBEBEB); background-image: linear-gradient(top, #D0D0D0, #EBEBEB);
}

Javascript Pagination - Script Codes JS Codes

/* * * * * * * * * * * * * * * * * * Pagination * javascript page navigation * * * * * * * * * * * * * * * * */
var Pagination = { code: '', // -------------------- // Utility // -------------------- // converting initialize data Extend: function(data) { data = data || {}; Pagination.size = data.size || 300; Pagination.page = data.page || 1; Pagination.step = data.step || 3; }, // add pages by number (from [s] to [f]) Add: function(s, f) { for (var i = s; i < f; i++) { Pagination.code += '<a>' + i + '</a>'; } }, // add last page with separator Last: function() { Pagination.code += '<i>...</i><a>' + Pagination.size + '</a>'; }, // add first page with separator First: function() { Pagination.code += '<a>1</a><i>...</i>'; }, // -------------------- // Handlers // -------------------- // change page Click: function() { Pagination.page = +this.innerHTML; Pagination.Start(); }, // previous page Prev: function() { Pagination.page--; if (Pagination.page < 1) { Pagination.page = 1; } Pagination.Start(); }, // next page Next: function() { Pagination.page++; if (Pagination.page > Pagination.size) { Pagination.page = Pagination.size; } Pagination.Start(); }, // -------------------- // Script // -------------------- // binding pages Bind: function() { var a = Pagination.e.getElementsByTagName('a'); for (var i = 0; i < a.length; i++) { if (+a[i].innerHTML === Pagination.page) a[i].className = 'current'; a[i].addEventListener('click', Pagination.Click, false); } }, // write pagination Finish: function() { Pagination.e.innerHTML = Pagination.code; Pagination.code = ''; Pagination.Bind(); }, // find pagination type Start: function() { if (Pagination.size < Pagination.step * 2 + 6) { Pagination.Add(1, Pagination.size + 1); } else if (Pagination.page < Pagination.step * 2 + 1) { Pagination.Add(1, Pagination.step * 2 + 4); Pagination.Last(); } else if (Pagination.page > Pagination.size - Pagination.step * 2) { Pagination.First(); Pagination.Add(Pagination.size - Pagination.step * 2 - 2, Pagination.size + 1); } else { Pagination.First(); Pagination.Add(Pagination.page - Pagination.step, Pagination.page + Pagination.step + 1); Pagination.Last(); } Pagination.Finish(); }, // -------------------- // Initialization // -------------------- // binding buttons Buttons: function(e) { var nav = e.getElementsByTagName('a'); nav[0].addEventListener('click', Pagination.Prev, false); nav[1].addEventListener('click', Pagination.Next, false); }, // create skeleton Create: function(e) { var html = [ '<a>&#9668;</a>', // previous button '<span></span>', // pagination container '<a>&#9658;</a>' // next button ]; e.innerHTML = html.join(''); Pagination.e = e.getElementsByTagName('span')[0]; Pagination.Buttons(e); }, // init Init: function(e, data) { Pagination.Extend(data); Pagination.Create(e); Pagination.Start(); }
};
/* * * * * * * * * * * * * * * * *
* Initialization
* * * * * * * * * * * * * * * * */
var init = function() { Pagination.Init(document.getElementById('pagination'), { size: 30, // pages size page: 1, // selected page step: 3 // pages before and after current });
};
document.addEventListener('DOMContentLoaded', init, false);
Javascript Pagination - Script Codes
Javascript Pagination - Script Codes
Home Page Home
Developer Dmitriy Karpov
Username karpovsystems
Uploaded August 20, 2022
Rating 4.5
Size 6,333 Kb
Views 44,528
Do you need developer help for Javascript Pagination?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Dmitriy Karpov (karpovsystems) Script Codes
Name
Eye of Sauron
Larvaes
Curve Bezier
Spin
CSS 3D Panorama
Gradients
Sphere
City generator
Metro style icons
CSS3 text transitions
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!