Skip to main content

Content Pagination Using PHP and jQuery


Hi everyone, this tutorial will teach you on how to create an elegant jQuery content pagination in a few line of codes. To start with, let's follow the steps below:

Step 1: Create Our CSS

The function of this part is it arrange our layout. To create our CSS copy the code bellow and save it as "index.php".

  1. <style type="text/css">
  2. #content div.section { display:none; }
  3. #content div.one { display:block; }
  4. body{
  5. background-color: #F7F7F7;
  6. color: #747474;
  7. font-family: Arial,sans-serif;
  8. font-size: 12px;
  9. line-height: 20px;
  10. height: 100%;
  11. width: 100%;
  12. margin:0;
  13. padding:0;
  14. }
  15. ul li{
  16. float:left;
  17. list-style:none;
  18. }
  19. ul li a{
  20. Padding:5px;
  21. }
  22. .clearfix{
  23. clear:both;
  24. }
  25. .section{
  26. padding-left: 43px; padding-top: 25px;
  27. }
  28. </style>

Step 2: Write Our jQuery Script

Copy the code below and paste it below the CSS file in "index.php".

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  2. <script type="text/javascript">
  3. $(document).ready(function() {
  4. $('#side_nav ul li a').click(function() {
  5. $('#side_nav ul li.current').removeClass('current');
  6. $(this).parent().addClass('current');
  7.  
  8. var filterVal = $(this).attr('class');
  9.  
  10. $('#content div.section').each(function() {
  11. if($(this).hasClass(filterVal)) {
  12. $(this).slideDown("slow");
  13. } else {
  14. $(this).hide("slow");
  15. }
  16. });
  17. return false;
  18. });
  19. });
  20. </script>

Step 3: Creating our page that display our content

Copy the code below and paste it below the jQuery file in "index.php".

  1. <div id=side_nav>
  2. <ul>
  3. <li class=current><a href="#" class=one>HOME</a></li>
  4. <li><a href="#" class=two>ABOUT US</a></li>
  5. <li><a href="#" class=three>CONTACT US</a></li>
  6. <li><a href="#" class=four>TOPIC THREE</a></li>
  7. </ul>
  8. <div class="clearfix"></div>
  9. </div>
  10.  
  11. <div id=content>
  12. <div class="section one">
  13. This tab is for section one content
  14. </div>
  15. <div class="section two">
  16. This tab is for section two content
  17. </div>
  18. <div class="section three">
  19. This tab is for section three content
  20. </div>
  21. <div class="section four">
  22. This tab is for section four content
  23. </div>
  24. </div>

to summarize the code will look like bellow

  1. <style type="text/css">
  2. #content div.section { display:none; }
  3. #content div.one { display:block; }
  4. body{
  5. background-color: #F7F7F7;
  6. color: #747474;
  7. font-family: Arial,sans-serif;
  8. font-size: 12px;
  9. line-height: 20px;
  10. height: 100%;
  11. width: 100%;
  12. margin:0;
  13. padding:0;
  14. }
  15. ul li{
  16. float:left;
  17. list-style:none;
  18. }
  19. ul li a{
  20. Padding:5px;
  21. }
  22. .clearfix{
  23. clear:both;
  24. }
  25. .section{
  26. padding-left: 43px; padding-top: 25px;
  27. }
  28. </style>
  29.  
  30.  
  31. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  32. <script type="text/javascript">
  33. $(document).ready(function() {
  34. $('#side_nav ul li a').click(function() {
  35. $('#side_nav ul li.current').removeClass('current');
  36. $(this).parent().addClass('current');
  37.  
  38. var filterVal = $(this).attr('class');
  39.  
  40. $('#content div.section').each(function() {
  41. if($(this).hasClass(filterVal)) {
  42. $(this).slideDown("slow");
  43. } else {
  44. $(this).hide("slow");
  45. }
  46. });
  47. return false;
  48. });
  49. });
  50. </script>
  51.  
  52.  
  53. <div id=side_nav>
  54. <ul>
  55. <li class=current><a href="#" class=one>HOME</a></li>
  56. <li><a href="#" class=two>ABOUT US</a></li>
  57. <li><a href="#" class=three>CONTACT US</a></li>
  58. <li><a href="#" class=four>TOPIC THREE</a></li>
  59. </ul>
  60. <div class="clearfix"></div>
  61. </div>
  62.  
  63. <div id=content>
  64. <div class="section one">
  65. This tab is for section one content
  66. </div>
  67. <div class="section two">
  68. This tab is for section two content
  69. </div>
  70. <div class="section three">
  71. This tab is for section three content
  72. </div>
  73. <div class="section four">
  74. This tab is for section four content
  75. </div>
  76. </div>

To put the code into action, click the menu and you will see that the content will change.

Hope this tutorial will help you, the finish file is attach in this tutorial you can download it.

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.