ITSourceCode.com

We Exist to Provide 100% Free Source Code and Tutorials

Custom Search

Pagination Using Ajax, jQuery, PHP and MySQL Database

pagignWithajaxIn this tutorial, I will teach you how to create pagination using jQuery , Ajax ,PHP and MySQL database.  It’s quite the same in my last tutorial the only thing is, I added Ajax and I also make some changes in the code.  Ajax is a method that can communicate to a server for exchanging data and updating parts of a web page – without refreshing the entire page.

 

Let’s begin:

 

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

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

CREATE TABLE `peopledb`.`tblpeople` (
 `ID` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
 `NAME` VARCHAR( 30 ) NOT NULL ,
 `ADDRESS` VARCHAR( 60 ) NOT NULL ,
 `SEX` VARCHAR( 11 ) NOT NULL ,
 `CONTACT` VARCHAR( 15 ) NOT NULL
 ) ENGINE = INNODB;

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

<?php
$server = 'localhost';
$dbuser = 'root';
$dbpass = '';
$dbname = 'peopledb';
$con = mysql_connect($server, $dbuser, $dbpass);
if (isset($con)) {
 # code...
 $dbSelect = mysql_select_db($dbname);
 if (!$dbSelect) {
 echo "Problem in selecting database! Please contact administraator";
 die(mysql_error());
 }
} else {
 echo "Problem in database connection! Please contact administraator";
 die(mysql_error());
}
?>

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

/** container */
#wrap {
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
}

@media (min-width: 768px) {
 #wrap {
 width: 750px;
 }
}

@media (min-width: 992px) {
 #wrap {
 width: 970px;
 }
}

@media (min-width: 1200px) {
 #wrap {
 width: 1170px;
 }
}

/*** for paging */
#pagination {
 float: right;
 padding-left: 0;
 border-radius: 4px;
}

#pagination > li {
 display: inline;
 list-style: none;
 font-size: 15px;
 color: #0063DC;
 padding: 10px;
 border: solid #ddd 1px;
}

#pagination > li:hover {
 color: #FF0084;
 background-color: #dedede;
}

/** for title */
.page-header {
 color: #0063DC;
 font-weight: 700;
 font-size: 30px;
 padding-bottom: 10px;
 margin: 35px 0 15px;
}

/** for table */
.table {
 width: 100%;
 max-width: 100%;
 margin-bottom: 20px;
}

.table > thead > tr > th,.table > tbody > tr > td {
 padding: 8px;
 line-height: 2;
 vertical-align: top;
 border-top: 1px solid #eee;
}

.table > thead > tr > th {
 text-align: left;
 vertical-align: bottom;
 border-bottom: 1px solid #eee;
}
#loader { 
 max-width: 100%;
 text-align: center;
}
#loader > img {
 width: 20%;
 height: 30%;
}

5.Set these codes for the design in the first load of the page. Name it “index.php”.

<!DOCTYPE html>
<html>
<head>
 <!-- css extension -->
 <link href="css/style.css" rel="stylesheet" type="text/css">
 <title>Itsourcecode</title>
</head>
<body>
 <!-- container -->
 <div id="wrap">
 <!-- header -->
 <h1 class="page-header">Pagination with Jquery, PHP and MySQL
 Database</h1><!-- Load content -->
 <div id="content">
 <?php
include 'loaddata.php';
?>
 </div><!-- for paging -->
 <?php
$perPage = 3;
/** Calculate the number of pages*/
$sqlQuery = "SELECT * FROM `tblpeople`";
$result = mysql_query($sqlQuery);
$maxrow = mysql_num_rows($result);
$page_number = ceil($maxrow / $perPage)?>
 <ul id="pagination">
 <?php
//Load page numbers
for ($i = 1; $i <= $page_number; $i++) {
 echo '<li id="' . $i . '">' . $i . '</li>';
}
?>
 </ul>
 </div>
 <script src="jquery/jquery.min.js" type="text/javascript">
 </script> <!-- jquery extension --> 
 <script src="js/paging.js" type="text/javascript">
 </script><!-- paging extension -->
</body>
</html>

6.Create a script for the method of pagination. Name it “paging.js”.

/** method for  paging  without refreshing the page. */
 jQuery(document).ready(function() {
     //Default Starting Page Results
     jQuery("#pagination li:first").css({
         'color': '#FF0084'
     }).css({
         'border': 'none'
     });
     /** create a click eventhandler for the pager */
     jQuery("#pagination li").click(function() {
         /** set the css for the pager */
         jQuery("#pagination li").css({
             'border': 'solid #dddddd 1px'
         }).css({
             'color': '#0063DC'
         });
         jQuery(this).css({
             'color': '#FF0084'
         }).css({
             'border': 'none'
         });
         /** set a loader */
         jQuery("#loader").fadeIn(900, 0);
         jQuery("#loader").html("");
         /** get the current page number */
         var page_number = this.id;
         /** create an ajax request to loaddata.php */
         $.ajax({
             type: "GET",
             url: "loaddata.php",
             dataType: "text", //expect html to be returned  
             data: {
                 page: +page_number
             },
             success: function(data) {
                 $("#content").html(data);
             }
         });
     });
 });

7.Do the following code for the method in loading the data. Name it “loaddata.php

<?php
include 'config.php';
?> 
<div id="loader"> 
 <!-- /*create a table for loading all data in the MySQL database. */ -->
 <table class="table" cellspacing="0">
   <thead>
    <tr> 
     <th>Name</th>
     <th>Address</th>
     <th>Sex</th> 
     <th>Contact#</th> 
    </tr> 
   </thead> 
   <tbody> 
 <?php
$perPage = 3;
if ($_GET) {
 $page = $_GET['page'];
} else {
 $page = 1;
}
$firstPage = ($page - 1) * $perPage;
$sqlQuery = "SELECT * FROM `tblpeople` limit {$firstPage},{$perPage}";
$result = mysql_query($sqlQuery) or die(mysql_error());
while ($row = mysql_fetch_array($result)) {
 echo '<tr>';
 echo '<td>' . $row['NAME'] . '</a></td>';
 echo '<td>' . $row['ADDRESS'] . '</td>';
 echo '<td>' . $row['SEX'] . '</td>';
 echo '<td>' . $row['CONTACT'] . '</td>';
 echo '</tr>';
}
?>  
   </tbody> 
 </table> 
</div>

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 Sourcecode

Facebook Comments

Check Your Domain Ranking

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!