App development

CMS

Company news

E-commerce solutions

Internet

SEO

SMO

Technology

Templates

Web Design

Web Development

Pagination with jQuery, MySQL and PHP.

Oct 25, 2013, by admin

This is a step by step tutorial to implement Pagination with jQuery, PHP and MySQL.

The tutorial contains three PHP files and two js files includes jQuery plugin.

-config.php (Database Configuration)
-pagination.php
-pagination_data.php
-jquery.js
-jquery_pagination.js

Database Table:

  1. CREATE TABLE messages
  2. (
  3. msg_id INT PRIMARY KEY AUTO_INCREMENT,
  4. message TEXT
  5. );

jquery_pagination.js
Contains javascript this script works like a data controller.

  1. $(document).ready(function()
  2. {
  3. //Display Loading Image
  4. function Display_Load()
  5. {
  6. $(“#loading”).fadeIn(900,0);
  7. $(“#loading”).html(“<img src=”bigLoader.gif“ />”);
  8. }
  9. //Hide Loading Image
  10. function Hide_Load()
  11. {
  12. $(“#loading”).fadeOut(‘slow’);
  13. };
  15. //Default Starting Page Results
  16. $(“#pagination li:first”)
  17. .css({‘color’ : ‘#FF0084′}).css({‘border’ : ‘none’});
  18. Display_Load();
  19. $(“#content”).load(“pagination_data.php?page=1″, Hide_Load());
  21. //Pagination Click
  22. $(“#pagination li”).click(function(){
  23. Display_Load();
  24. //CSS Styles
  25. $(“#pagination li”)
  26. .css({‘border’ : ‘solid #dddddd 1px’})
  27. .css({‘color’ : ‘#0063DC’});
  29. $(this)
  30. .css({‘color’ : ‘#FF0084′})
  31. .css({‘border’ : ‘none’});
  33. //Loading Data
  34. var pageNum = this.id;
  35. $(“#content”).load(“pagination_data.php?page=” + pageNum, Hide_Load());
  36. });
  38. });

config.php
You have to change hostname, username, password and databasename.

  1. <?php
  2. $mysql_hostname = “localhost”;
  3. $mysql_user = “username”;
  4. $mysql_password = “password”;
  5. $mysql_database = “database”;
  6. $bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password)
  7. or die(“Opps some thing went wrong”);
  8. mysql_select_db($mysql_database, $bd)
  9. or die(“Opps some thing went wrong”);
  10. ?>

pagination.php

User interface page.

  1. <?php
  2. include(‘config.php’);
  3. $per_page = 9;
  5. //Calculating no of pages
  6. $sql = “select * from messages”;
  7. $result = mysql_query($sql);
  8. $count = mysql_num_rows($result);
  9. $pages = ceil($count/$per_page)
  10. ?>
  12. <script type=“text/javascript” src=”http://ajax.googleapis.com/ajax/
  13. libs/jquery/1.3.0/jquery.min.js”></script>
  14. <script type=“text/javascript” src=“jquery_pagination.js”></script>
  16. <div id=“loading” ></div>
  17. <div id=“content” ></div>
  18. <ul id=“pagination”>
  19. <?php
  20. //Pagination Numbers
  21. for($i=1; $i<=$pages; $i++)
  22. {
  23. echo ‘<li id=”‘.$i.‘”>’.$i.‘</li>’;
  24. }
  25. ?>
  26. </ul>

pagination_data.php

Simple php script display data from the messages table.

  1. <?php
  2. include(‘config.php’);
  3. $per_page = 9;
  4. if($_GET)
  5. {
  6. $page=$_GET[‘page’];
  7. }
  9. $start = ($page-1)*$per_page;
  10. $sql = “select * from messages order by msg_id limit $start,$per_page”;
  11. $result = mysql_query($sql);
  12. ?>
  13. <table width=“800px”>
  14. <?php
  15. while($row = mysql_fetch_array($result))
  16. {
  17. $msg_id=$row[‘msg_id’];
  18. $message=$row[‘message’];
  19. ?>
  20. <tr>
  21. <td><?php echo $msg_id; ?></td>
  22. <td><?php echo $message; ?></td>
  23. </tr>
  24. <?php
  25. }
  26. ?>
  27. </table>

CSS Code

CSS code for page numbers.

  1. #loading
  2. {
  3. width: 100%;
  4. position: absolute;
  5. }
  6. li
  7. {
  8. list-style: none;
  9. float: left;
  10. margin-right: 16px;
  11. padding:5px;
  12. border:solid 1px #dddddd;
  13. color:#0063DC;
  14. }
  15. li:hover
  16. {
  17. color:#FF0084;
  18. cursor: pointer;
  19. }

Hope you all enjoyed the post to get more updates like the page Bugtreat Technologies  To get updates of our templates like the Cs Cart Templates