Custom Pager Using Prev And Next In jQuery

Sibeesh Venu

JavaScript jQuery HTML5 CSS3Custom Pager

16 Comments

Join the conversation! Your thoughts help the community grow.

ankit shukla9y ago
Please provide this article with dynamic data
Santhakumar Munuswamy11y ago
Good Article
Mukesh Kumar11y ago
Good Job
Sibeesh Venu11y ago
Debendra Dash Thank you
Debendra Dash11y ago
good one...
Sibeesh Venu11y ago
Pankaj Kumar Choudhary Thanks a lot for the information on achieving the same in different way. Much appreciated
Sibeesh Venu11y ago
Pankaj Kumar Choudhary Thanks a lot for noticing it. Will check it
Sibeesh Venu11y ago
Nitin Tyagi Thanks a lot
Sibeesh Venu11y ago
Harshad Pansuriya Thanks a lot
Sibeesh Venu11y ago
Gowtham K Thanks a lot
Nilesh Jadav11y ago
Nice one sir !!
Pankaj Kumar Choudhary11y ago
Some day ago i did same task for my friend so i provide jQuery code for custom pager. So it may be another way to achieve same goal using below code........... $(".prev").click(function () { $("#outer div").each(function (index, element) { if ($(this).css("background-color") == "rgb(0, 0, 255)") { if (index == 0) { $(this).css("background-color", "green"); $("#outer div").eq(7).css("background-color", "blue") } else { $(this).css("background-color", "green"); $(this).prev().css("background-color", "blue"); } } }) }) $(".next").click(function () { $("#outer div").each(function (index, element) { if ($(this).css("background-color") == "rgb(0, 0, 255)") { if (index == 13) { $(this).css("background-color", "green"); $("#outer div").eq(6).css("background-color", "blue") } else { $(this).css("background-color", "green"); $(this).next().css("background-color", "blue"); } return false; } }) })
Pankaj Kumar Choudhary11y ago
Nice Article Sir........... I found some problem with your code that when count is reach at -6 and if we press the "<<<" button again then it take one more click to reach at node 0 and same as when count reach at 7 and now if we press ">>>" button then at same time 0 and 7 both become blue. So please check code once again...... it may be possible.........
Nitin11y ago
Good one
Harshad Pansuriya11y ago
Nice one
Gowtham K11y ago
Good One

In this post we will create a custom pager using prev and next functions in jQuery. You can treat this post as a simple demo of using prev and next functions. We will be using some HTML UI elements and we will apply the paging functionality by using native jQuery codes. In this way you can get the information about on which page is requested by the user, once you get it, you can create a jQuery ajax call and fetch the data from the database and show. You need to know the basics of jQuery and CSS before going further. I hope you will like this.

Background

We can find so many pager in on-line. Here in this post I am just trying to populate my own pager. Please be noted that this is just a demo, so that you cannot find more functionalities here.

Using the code

First thing you need to do is create a page.

<!DOCTYPE html>
<html>
<head>
<title>Prev Next In jQuery - Sibeesh Passion</title>
</head>
<body>
<div id="container">
<div id="outer">
<div>-6</div>
<div>-5</div>
<div>-4</div>
<div>-3</div>
<div>-2</div>
<div>-1</div>
<div class="first">0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
<div>
<table>
<tr>
<td class="prev" title="Previous">
<<<</td>
<td class="next" title="Next">>>></td>
</tr>
</table>
</div>
</div>
</body>
</html>

Then we will apply some CSS, so that it will look nice.

<style>
#outer div {
width: 20px;
height: 20px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin: 10px;
box-shadow: 1px 1px 1px #999;
font-style: oblique;
text-align: center;
float: left;
background: green;
}
#outer .first {
background: blue;
}
.prev,
.next {
font-weight: bold;
font-size: 30px;
padding: 10px;
cursor: pointer;
}
#container {
text-align: center;
width: 50%;
margin-left: 25%;
}
</style>

Now add jQuery reference.

<script>
<script src="JQuery%20Versions/jquery-1.11.3.min.js"></script>

Run your page and make sure that our custom pager design is fine.

run

Now it is time to add our scripts.

<script>
$(document).ready(function ()
{
var $first = $(".first");
var i = 0;
$(".prev").click(function ()
{
++i;
if ($('#outer div').length / 2 < i)
{
i = 0;
$('#outer .first').css('background', 'blue');
$first = $(".first");
}
else
{
$first = $first.prev();
$("#outer div").css("background", "green");
$first.css("background", "blue");
}
});
$(".next").click(function ()
{
++i;
if ($('#outer div').length / 2 < i)
{
i = 0;
$('#outer .first').css('background', 'blue');
$first = $(".first");
}
else
{
$first = $first.next();
$("#outer div").css("background", "green");
$first.css("background", "blue");
}
});
});
</script>

If you notice in the code block, you can see that we are checking $(‘#outer div’).length / 2 < i in each click. This will get true when the user clicked after the selection goes to end. We are just making the iteration to first when this occurs.

We are doing the above mentioned scenario both in prev click and next click. Now it is time for demo.

Please see the demo here: Custom Pager.

That is all. We did it.

Complete Code

<!DOCTYPE html>
<html>
<head>
<title>Prev Next In jQuery - Sibeesh Passion</title>
<script src="http://sibeeshpassion.com/content/scripts/jquery-2.0.2.min.js"></script>
<script>
$(document).ready(function ()
{
var $first = $(".first");
var i = 0;
$(".prev").click(function ()
{
++i;
if ($('#outer div').length / 2 < i)
{
i = 0;
$('#outer .first').css('background', 'blue');
$first = $(".first");
}
else
{
$first = $first.prev();
$("#outer div").css("background", "green");
$first.css("background", "blue");
}
});
$(".next").click(function ()
{
++i;
if ($('#outer div').length / 2 < i)
{
i = 0;
$('#outer .first').css('background', 'blue');
$first = $(".first");
}
else
{
$first = $first.next();
$("#outer div").css("background", "green");
$first.css("background", "blue");
}
});
});
</script>
<style>
#outer div {
width: 20px;
height: 20px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin: 10px;
box-shadow: 1px 1px 1px #999;
font-style: oblique;
text-align: center;
float: left;
background: green;
}
#outer .first {
background: blue;
}
.prev,
.next {
font-weight: bold;
font-size: 30px;
padding: 10px;
cursor: pointer;
}
#container {
text-align: center;
width: 50%;
margin-left: 25%;
}
</style>
</head>
<body>
<div id="container">
<div id="outer">
<div>-6</div>
<div>-5</div>
<div>-4</div>
<div>-3</div>
<div>-2</div>
<div>-1</div>
<div class="first">0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
<div>
<table>
<tr>
<td class="prev" title="Previous">
<<<</td>
<td class="next" title="Next">>>></td>
</tr>
</table>
</div>
</div>
</body>
</html>

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

If you have any questions, then please mention in the comments section.

Read this article in my blog here.