Content Pagination Using PHP and jQuery

Submitted by: 
Language: 
Visitors have accessed this post 3603 times.

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="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>" rel="nofollow">http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script></a>
  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="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>" rel="nofollow">http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script></a>
  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.


Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.