Content Pagination Using PHP and jQuery

Submitted by argie on Thursday, March 14, 2013 - 11:38.
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.
Tags
jquery pagination

Add new comment

About text formats
  • 86 views