ITSourceCode.com

We Exist to Provide 100% Free Source Code and Tutorials

Custom Search

Pagination with jQuery, PHP and MySQL Database

Pagination with JqueryPagination is used when your data has exceeded in the page. This method will limit the data and set how many pages that will appear in the document of the page. Most of the time, the page is refreshing using this process but with the use of jQuery, there’s no need to load the page.

 

Lets begin:

1.Create a MySQL database and name it “peopledb“.

2.Do this following query for creating a table in the MySQL database.

  1. CREATE TABLE `peopledb`.`tblpeople` (
  2. `NAME` VARCHAR( 30 ) NOT NULL ,
  3. `ADDRESS` VARCHAR( 60 ) NOT NULL ,
  4. `SEX` VARCHAR( 11 ) NOT NULL ,
  5. `CONTACT` VARCHAR( 15 ) NOT NULL

3.Create a file for a configuration between MySQL database and PHP script. Name it “config.php”.

  1. $server = 'localhost';
  2. $dbuser = 'root';
  3. $dbpass = '';
  4. $dbname = 'peopledb';
  5. $con = mysql_connect($server, $dbuser, $dbpass);
  6. if (isset($con)) {
  7. # code...
  8. $dbSelect = mysql_select_db($dbname);
  9. if (!$dbSelect) {
  10. echo "Problem in selecting database! Please contact administraator";
  11. }
  12. } else {
  13. echo "Problem in database connection! Please contact administraator";
  14. }

4.Create a css file for the layout of your design. Name it “style.css”.

  1. /** container */
  2. #wrap{
  3. padding-right: 15px;
  4. padding-left: 15px;
  5. margin-right: auto;
  6. margin-left: auto;
  7. }
  8. @media (min-width: 768px) {
  9. #wrap {
  10. width: 750px;
  11. }
  12. }
  13. @media (min-width: 992px) {
  14. #wrap {
  15. width: 970px;
  16. }
  17. }
  18. @media (min-width: 1200px) {
  19. #wrap {
  20. width: 1170px;
  21. }
  22. }
  23. /*** for paging */
  24. #pagination{
  25. float: right;
  26. display: inline-block;
  27. padding-left: 0;
  28. border-radius: 4px;
  29. }
  30. #pagination > li {
  31. display: inline;
  32. list-style: none;
  33. font-size: 15px;
  34. color: #0063DC;
  35. padding: 10px;
  36. border : solid #dddddd 1px;
  37. }
  38. #pagination > li:hover {
  39. color: #FF0084;
  40. background-color: #dedede;
  41. }
  42. /** for title */
  43. .page-header{
  44. color: #0063DC;
  45. font-weight: bold;
  46. padding-bottom: 10px;
  47. margin: 35px 0 15px;
  48. border-bottom: 1px solid #eee;
  49. }
  50.  
  51. /** for table */
  52. .table {
  53. width: 100%;
  54. max-width: 100%;
  55. margin-bottom: 20px;
  56. }
  57. .table > thead > tr > th,
  58. .table > tbody > tr > td {
  59. padding: 8px;
  60. line-height: 2;
  61. vertical-align: top;
  62. border-top: 1px solid #eee;
  63. }
  64. .table > thead > tr > th {
  65. text-align: left;
  66. vertical-align: bottom;
  67. border-bottom: 1px solid #eee;
  68. }

2.Do this following code for the index.

  1. <?php include 'config.php'; ?>
  2.  
  3. <!-- css extension -->
  4. <link rel="stylesheet" type="text/css" href="css/style.css">
  5.  
  6. <!-- container -->
  7. <div id="wrap">
  8. <!-- header -->
  9. <h1 class="page-header">Pagination with Jquery, PHP and MySQL Database</h1>
  10. <!-- Load content -->
  11. <div id="content"> </div>
  12. <!-- for paging -->
  13. <?php
  14. $perPage = 3;
  15.  
  16. /** Calculate the number of pages*/
  17. $sqlQuery = "SELECT * FROM `tblpeople`";
  18. $result = mysql_query($sqlQuery);
  19. $maxrow = mysql_num_rows($result);
  20. $page_number = ceil($maxrow/$perPage)
  21. ?>
  22.  
  23. <ul id="pagination" >
  24. <?php
  25. //Load page numbers
  26. for($i=1; $i<=$page_number; $i++)
  27. {
  28. echo '<li id="'.$i.'">'.$i.'</li>';
  29. }
  30. ?>
  31. </ul>
  32. </div>
  33.  
  34. <!-- jquery extension -->
  35. <script type="text/javascript" src="jquery/jquery.min.js"></script>
  36. <!-- paging extension -->
  37. <script type="text/javascript" src="js/paging.js"></script>

3.Create a script for loading the data that appears in the page. Name it “loaddata.php”.

  1. <div id="loader">
  2. <table class="table " style="font-size:12px" cellspacing="0">
  3.         <thead>
  4.           <tr>
  5.             <th>Name</th>
  6.             <th>Address</th>
  7.             <th>Sex</th>  
  8.             <th>Contact#</th>
  9.          </tr>
  10.         </thead>
  11.         <tbody>
  12.          &lt;?php
  13.             $perPage = 3;
  14.             if($_GET){
  15.             $page=$_GET[&#039;page'];
  16.            }
  17.  
  18.             $firstPage = ($page-1)*$perPage;
  19.  
  20.             $sqlQuery = &quot;SELECT * FROM `tblpeople` limit {$firstPage},{$perPage}&quot;;
  21.             $result = mysql_query($sqlQuery) or die(mysql_error());
  22.  
  23.             while ($row = mysql_fetch_array($result)) {
  24.               echo &#039;<tr>';
  25.              echo '<td>' .$row['NAME'].'</a></td>';
  26.               echo '<td>'. $row['ADDRESS'].'</td>';
  27.               echo '<td>'. $row['SEX'].'</td>';
  28.               echo '<td>'. $row['CONTACT'].'</td>';
  29.               echo '</tr>';
  30.             }
  31.                
  32.           ?&gt;
  33.         </tbody>
  34.       </table>
  35. </div>

4.Create a  method for paging. Name it “pagination.js”.

  1. /** method for paging without refreshing the page. */
  2. jQuery(document).ready(function(){
  3.  
  4. //Default Starting Page Results
  5. jQuery("#pagination")
  6. jQuery("#pagination li:first")
  7. .css({'color' : '#FF0084'}).css({'border' : 'none'});
  8.  
  9. /* load the first page */
  10. jQuery("#content").load("loaddata.php?page=1", jQuery("#loader").fadeOut('slow'));
  11.  
  12. /** create a click eventhandler for the pager */
  13. jQuery("#pagination li").click(function(){
  14.  
  15. // set the loading Image
  16. jQuery("#loader").fadeIn(900,0);
  17. jQuery("#loader").html("&lt;img src='img/loader.gif' height='50%' width='100%' /&gt;");
  18.  
  19. /** set the css for the pager */
  20. jQuery("#pagination li")
  21. .css({'border' : 'solid #dddddd 1px'})
  22. .css({'color' : '#0063DC'});
  23.  
  24. jQuery(this)
  25. .css({'color' : '#FF0084'})
  26. .css({'border' : 'none'});
  27.  
  28. var page_number = this.id;
  29. jQuery("#content").load("loaddata.php?page=" + page_number, jQuery("#loader").fadeOut('slow'));
  30. });
  31.  
  32. });

 

For all students who need programmer for your thesis system or anyone who needs a sourcecode in any programming languages. You can contact me @ :

Email – jannopalacios@gmail.com
Mobile No. – 09305235027 – tnt

Download Complete Sourcecode here.

Facebook Comments

Check Your Domain Ranking

1 Comment

Add a Comment
  1. 
    You are so cool! I don’t suppose I’ve truly read anything like this before. So wonderful to discover someone with genuine thoughts on this topic. Really.. thank you for starting this up. This website is something that’s needed on the web, someone with a bit of originality!

Leave a Reply

Your email address will not be published. Required fields are marked *

ITSourceCode.com © 2016 Frontier Theme

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!