How to Create Paging Links in JavaScript

I have developed a custom function in JavaScript which creates Paging Links in your web page.

You can use it freely whenever you have a need for it.

…………………………………………………………………
— — — — — — — — — DEMO HERE — — — — — — — — —
…………………………………………………………………

The JavaScript Paging Function

This JavaScript function code which is developed by me is given below:

function Paging(PageNumber, PageSize, TotalRecords, ClassName, PageUrl, DisableClassName) {
var ReturnValue = "";
var TotalPages = Math.ceil(TotalRecords / PageSize);
if (+PageNumber > 1) {
if (+PageNumber == 2)
ReturnValue = ReturnValue + "<a href='" + PageUrl.trim() + "?pn=" + (+PageNumber - 1) + "' class='" + ClassName + "'>Previous</a>&nbsp;&nbsp;&nbsp;";
else {
ReturnValue = ReturnValue + "<a href='" + PageUrl.trim();
if (PageUrl.includes("?"))
ReturnValue = ReturnValue + "&";
else
ReturnValue = ReturnValue + "?";
ReturnValue = ReturnValue + "pn=" + (+PageNumber - 1) + "' class='" + ClassName + "'>Previous</a>&nbsp;&nbsp;&nbsp;";
}
}
else
ReturnValue = ReturnValue + "<span class='" + DisableClassName + "'>Previous</span>&nbsp;&nbsp;&nbsp;";
if ((+PageNumber - 3) > 1)
ReturnValue = ReturnValue + "<a href='" + PageUrl.trim() + "?pn=1' class='" + ClassName + "'>1</a>&nbsp;.....&nbsp;|&nbsp;";
for (var i = +PageNumber - 3; i <= +PageNumber; i++)
if (i >= 1) {
if (+PageNumber != i) {
ReturnValue = ReturnValue + "<a href='" + PageUrl.trim();
if (PageUrl.includes("?"))
ReturnValue = ReturnValue + "&";
else
ReturnValue = ReturnValue + "?";
ReturnValue = ReturnValue + "pn=" + i + "' class='" + ClassName + "'>" + i + "</a>&nbsp;|&nbsp;";
}
else {
ReturnValue = ReturnValue + "<span style='font-weight:bold;'>" + i + "</span>&nbsp;|&nbsp;";
}
}
for (var i = +PageNumber + 1; i <= +PageNumber + 3; i++)
if (i <= TotalPages) {
if (+PageNumber != i) {
ReturnValue = ReturnValue + "<a href='" + PageUrl.trim();
if (PageUrl.includes("?"))
ReturnValue = ReturnValue + "&";
else
ReturnValue = ReturnValue + "?";
ReturnValue = ReturnValue + "pn=" + i + "' class='" + ClassName + "'>" + i + "</a>&nbsp;|&nbsp;";
}
else {
ReturnValue = ReturnValue + "<span style='font-weight:bold;'>" + i + "</span>&nbsp;|&nbsp;";
}
}
if ((+PageNumber + 3) < TotalPages) {
ReturnValue = ReturnValue + ".....&nbsp;<a href='" + PageUrl.trim();
if (PageUrl.includes("?"))
ReturnValue = ReturnValue + "&";
else
ReturnValue = ReturnValue + "?";
ReturnValue = ReturnValue + "pn=" + TotalPages + "' class='" + ClassName + "'>" + TotalPages + "</a>";
}
if (+PageNumber < TotalPages) {
ReturnValue = ReturnValue + "&nbsp;&nbsp;&nbsp;<a href='" + PageUrl.trim();
if (PageUrl.includes("?"))
ReturnValue = ReturnValue + "&";
else
ReturnValue = ReturnValue + "?";
ReturnValue = ReturnValue + "pn=" + (+PageNumber + 1) + "' class='" + ClassName + "'>Next</a>";
}
else
ReturnValue = ReturnValue + "&nbsp;&nbsp;&nbsp;<span class='" + DisableClassName + "'>Next</span>";
return (ReturnValue);
}

Example: Creating Paging Links in JavaScript

Let me show you how to use this function to create pagination in JavaScript.

Note — You can also use this paging feature in your jQuery code.

First Add the follow HTML code to your web page:

<button id=”pagingButton” onclick=”CallPaging(1);”>Create Paging Links</button>

<div id=”pagingDiv”></div>

There is a button which calls a function CallPaging(1) and a div having id called as pagingDiv. In this div I will create pagination links.

Add the JavaScript code to your Web Page

The JavaScript code to add to your page is:

<script>
var pn = GetParameterByName("pn");
if (pn != null) {
CallPaging(pn);
}
function CallPaging(pn) {
var result = Paging(pn, 5, 50, "myClass", "index.html", "myDisableClass");
document.getElementById("pagingDiv").innerHTML = result;
}
function GetParameterByName(name) {
url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
function Paging(PageNumber, PageSize, TotalRecords, ClassName, PageUrl, DisableClassName) {
// code
}
</script>

Explanation: You can see I added my JavaScript Paging function which takes 6 parameters. These parameters are:

1. PageNumber: The current page number.

2. PageSize: The size of the page.

3. TotalRecords: The total number of records on all pages.

4. ClassName: The CSS Class set on paging links that are not disabled.

5. PageUrl: The url of the page where the links are created.

6. DisableClassName: the CSS Class set on disabled links.

The paging links will provide the current page value in the URL of the page i.e in Query String parameter, like ?pn=1, ?pn=2.

So you have to extract the value of pn from the Query String. I have also provided function GetParameterByName() that will help you extract these values.

When the pagingButton is clicked it calls CallPaging(1). This function in turn calls my Paging function and show the paging links inside pagingDiv.

Here I have set pageSize as 5 and totalRecords as 50, so 10 pages will be created.

I also call the CallPaging() function on page load when there is pn value on the Query String.

Add the Following CSS to style the Paging Links

The CSS to provide the color and design is :

<style>
#pagingDiv {
padding-top: 15px;
}
#pagingDiv .myDisableClass {
background-color: #4CAF50;
}
#pagingDiv .myClass {
background-color: #ebbebe;
}
#pagingDiv a, #pagingDiv span {
display: inline-block;
padding: 0px 9px;
margin-right: 4px;
border-radius: 3px;
border: solid 1px #c0c0c0;
background: #e9e9e9;
box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);
font-size: .875em;
font-weight: bold;
text-decoration: none;
color: #717171;
text-shadow: 0px 1px 0px rgba(255,255,255, 1);
}
#pagingDiv a:hover {
background: #fefefe;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#f0f0f0));
background: -moz-linear-gradient(0% 0% 270deg,#FEFEFE, #f0f0f0);
}
#pagingDiv a.active {
border: none;
background: #616161;
box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8);
color: #f0f0f0;
text-shadow: 0px 0px 3px rgba(0,0,0, .5);
}
#pagingDiv span {
color: #f0f0f0;
background: #616161;
}
</style>

Conclusion

Hope you find this JavaScript function useful in your web development work. I have also written a similar tutorial — How to Create jQuery Pagination System in your Web Page.

“Please do me a clap as it will help you to reach out to more medium users.”

If you have any Questions do let me know. Thanks Yogi !