JQuery Ajax without refreshing the page.

Freejs.net has sent many without refreshing the page code, are more practical, this one is very simple, suitable for learning or comments using

Search this site can find more paging code

Note that the JQ version 1.4.3


 jQuery Ajax without refreshing the page.
Demonstration

XML/HTML Code
  1. <script>
  2. $(function(){
  3. $("#content").load("view-comments.php");
  4. //PAGE NUMBER onClick FUNCTION
  5. $(".page").live("click", function(){
  6. var page = $(this).attr("id");
  7. $("#content").load("view-comments.php?page="+page);
  8. });
  9. });
  10. </script>
  11. <style>
  12. .page:hover {
  13. cursor: pointer;
  14. text-decoration: underline;
  15. }
  16. .pagenum {
  17. color: #32baed;
  18. }
  19. .content {
  20. width: 600px;
  21. }
  22. .content td {
  23. width: 50%;
  24. }
  25. </style>
  26. <div id="content" style="padding-left:100px;"></div>


view-comments.php

PHP Code
  1. <?php
  2. //FILE WITH THE IMPORTANT MySQL INFO
  3. include 'conn.php';
  4. //PAGE NUMBER, RESULTS PER PAGE, AND OFFSET OF THE RESULTS
  5. if($_GET["page"]){
  6. $pagenum = $_GET["page"];
  7. } else {
  8. $pagenum = 1;
  9. }
  10. $rowsperpage = 3; //MAXIMUM RESULTS PER PAGE
  11. $offset = ($pagenum - 1) * $rowsperpage; //WHERE THE RESULTS START FROM
  12. $table="content";
  13. //FOR RESULTS OF THE PAGE
  14. $q = mysql_query("SELECT * FROM $table ORDER BY id LIMIT $offset, $rowsperpage");
  15. $page_nums = mysql_num_rows($q); //NUMBER OF RESULTS FOR THE PAGE
  16. $total_q = mysql_query("SELECT * FROM $table"); //FOR THE ALL RESULTS
  17. $total_nums = mysql_num_rows($total_q); //TOTAL NUMBER OF RESULTS
  18. $total_pages = ceil($total_nums/$rowsperpage); //NUMBER OF PAGES
  19. //IF PAGE NUMBER IS WITHIN THE FIRST AND LAST PAGES
  20. if($pagenum>=1&&$pagenum<=$total_pages)
  21. {
  22. while($r=mysql_fetch_array($q))
  23. {
  24. $content = $r["name"];
  25. echo '<table class="content"><tr><td>'.$content.'</td></tr></table>';
  26. }
  27. echo '<br>';
  28. //IF ANY RESULTS
  29. if($total_nums)
  30. {
  31. $range = 2; //NUMBER OF PAGES TO BE SHOWN BEFORE AND AFTER THE CURRENT PAGE NUMBER
  32. //FIRST, PREVIOUS, NEXT, AND LAST LINKS
  33. if($pagenum>1)
  34. {
  35. $page = $pagenum - 1;
  36. $first = '<a class="page" id="1">First</a> ';
  37. $prev = '<a class="page" id="'.$page.'">Prev</a> ';
  38. }
  39. if($pagenum<$total_pages)
  40. {
  41. $page = $pagenum + 1;
  42. $next = '<a class="page" id="'.$page.'">Next</a> ';
  43. $last = '<a class="page" id="'.$total_pages.'">Last</a> ';
  44. }
  45. //PAGINATION
  46. for($page=($pagenum-$range); $page<=($pagenum+$range); $page++)
  47. {
  48. if($page>=1&&$page<=$total_pages)
  49. {
  50. if($page==$pagenum)
  51. {
  52. $nav .= '<span class="pagenum">'.$page.'</span> ';
  53. }
  54. else
  55. {
  56. $nav .= '<a class="page" id="'.$page.'">'.$page.'</a> ';
  57. }
  58. }
  59. }
  60. }
  61. //DISPAYS IN HTML
  62. echo $first . $prev . $nav . $next . $last;
  63. } else {
  64. //OTHERWISE...
  65. header("Location: view-comments.php"); //WILL REDIRECT TO THE FIRST PAGE OF RESULTS
  66. }
  67. ?>



The original address

Posted by Antonio at December 18, 2013 - 8:29 PM