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.

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5. <title>Prev Next In jQuery - Sibeesh Passion</title>
  6. </head>
  8. <body>
  9. <div id="container">
  10. <div id="outer">
  11. <div>-6</div>
  12. <div>-5</div>
  13. <div>-4</div>
  14. <div>-3</div>
  15. <div>-2</div>
  16. <div>-1</div>
  17. <div class="first">0</div>
  18. <div>1</div>
  19. <div>2</div>
  20. <div>3</div>
  21. <div>4</div>
  22. <div>5</div>
  23. <div>6</div>
  24. <div>7</div>
  25. </div>
  26. <div>
  27. <table>
  28. <tr>
  29. <td class="prev" title="Previous">
  30. <<<</td>
  31. <td class="next" title="Next">>>></td>
  32. </tr>
  33. </table>
  34. </div>
  35. </div>
  36. </body>
  38. </html>
Then we will apply some CSS, so that it will look nice.
  1. <style>
  2. #outer div {
  3. width: 20px;
  4. height: 20px;
  5. border: 1px solid #ccc;
  6. border-radius: 5px;
  7. padding: 10px;
  8. margin: 10px;
  9. box-shadow: 1px 1px 1px #999;
  10. font-style: oblique;
  11. text-align: center;
  12. float: left;
  13. background: green;
  14. }
  16. #outer .first {
  17. background: blue;
  18. }
  20. .prev,
  21. .next {
  22. font-weight: bold;
  23. font-size: 30px;
  24. padding: 10px;
  25. cursor: pointer;
  26. }
  28. #container {
  29. text-align: center;
  30. width: 50%;
  31. margin-left: 25%;
  32. }
  33. </style>
Now add jQuery reference.
  1. <script>
  2. <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.
  1. <script>
  2. $(document).ready(function ()
  3. {
  4. var $first = $(".first");
  5. var i = 0;
  6. $(".prev").click(function ()
  7. {
  8. ++i;
  9. if ($('#outer div').length / 2 < i)
  10. {
  11. i = 0;
  12. $('#outer .first').css('background', 'blue');
  13. $first = $(".first");
  14. }
  15. else
  16. {
  17. $first = $first.prev();
  18. $("#outer div").css("background", "green");
  19. $first.css("background", "blue");
  20. }
  21. });
  22. $(".next").click(function ()
  23. {
  24. ++i;
  25. if ($('#outer div').length / 2 < i)
  26. {
  27. i = 0;
  28. $('#outer .first').css('background', 'blue');
  29. $first = $(".first");
  30. }
  31. else
  32. {
  33. $first = $first.next();
  34. $("#outer div").css("background", "green");
  35. $first.css("background", "blue");
  36. }
  37. });
  38. });
  39. </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
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5. <title>Prev Next In jQuery - Sibeesh Passion</title>
  6. <script src="http://sibeeshpassion.com/content/scripts/jquery-2.0.2.min.js"></script>
  7. <script>
  8. $(document).ready(function ()
  9. {
  10. var $first = $(".first");
  11. var i = 0;
  12. $(".prev").click(function ()
  13. {
  14. ++i;
  15. if ($('#outer div').length / 2 < i)
  16. {
  17. i = 0;
  18. $('#outer .first').css('background', 'blue');
  19. $first = $(".first");
  20. }
  21. else
  22. {
  23. $first = $first.prev();
  24. $("#outer div").css("background", "green");
  25. $first.css("background", "blue");
  26. }
  27. });
  28. $(".next").click(function ()
  29. {
  30. ++i;
  31. if ($('#outer div').length / 2 < i)
  32. {
  33. i = 0;
  34. $('#outer .first').css('background', 'blue');
  35. $first = $(".first");
  36. }
  37. else
  38. {
  39. $first = $first.next();
  40. $("#outer div").css("background", "green");
  41. $first.css("background", "blue");
  42. }
  43. });
  44. });
  45. </script>
  46. <style>
  47. #outer div {
  48. width: 20px;
  49. height: 20px;
  50. border: 1px solid #ccc;
  51. border-radius: 5px;
  52. padding: 10px;
  53. margin: 10px;
  54. box-shadow: 1px 1px 1px #999;
  55. font-style: oblique;
  56. text-align: center;
  57. float: left;
  58. background: green;
  59. }
  61. #outer .first {
  62. background: blue;
  63. }
  65. .prev,
  66. .next {
  67. font-weight: bold;
  68. font-size: 30px;
  69. padding: 10px;
  70. cursor: pointer;
  71. }
  73. #container {
  74. text-align: center;
  75. width: 50%;
  76. margin-left: 25%;
  77. }
  78. </style>
  79. </head>
  81. <body>
  82. <div id="container">
  83. <div id="outer">
  84. <div>-6</div>
  85. <div>-5</div>
  86. <div>-4</div>
  87. <div>-3</div>
  88. <div>-2</div>
  89. <div>-1</div>
  90. <div class="first">0</div>
  91. <div>1</div>
  92. <div>2</div>
  93. <div>3</div>
  94. <div>4</div>
  95. <div>5</div>
  96. <div>6</div>
  97. <div>7</div>
  98. </div>
  99. <div>
  100. <table>
  101. <tr>
  102. <td class="prev" title="Previous">
  103. <<<</td>
  104. <td class="next" title="Next">>>></td>
  105. </tr>
  106. </table>
  107. </div>
  108. </div>
  109. </body>
  111. </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.