Pagination with jQuery, PHP and MySQL Database

1
490

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.

[mysql]

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;

[/mysql]

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());
}

[/php]

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

[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;
display: inline-block;
padding-left: 0;
border-radius: 4px;
}
#pagination > li {
display: inline;
list-style: none;
font-size: 15px;
color: #0063DC;
padding: 10px;
border : solid #dddddd 1px;
}
#pagination > li:hover {
color: #FF0084;
background-color: #dedede;
}
/** for title */
.page-header{
color: #0063DC;
font-weight: bold;
padding-bottom: 10px;
margin: 35px 0 15px;
border-bottom: 1px solid #eee;
}

/** 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;
}

[/css]

2.Do this following code for the index.

[php]

<?php include ‘config.php’; ?>

<!– css extension –>
<link rel=”stylesheet” type=”text/css” href=”css/style.css”>

<!– container –>
<div id=”wrap”>
<!– header –>
<h1 class=”page-header”>Pagination with Jquery, PHP and MySQL Database</h1>
<!– Load content –>
<div id=”content”> </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>

<!– jquery extension –>
<script type=”text/javascript” src=”jquery/jquery.min.js”></script>
<!– paging extension –>
<script type=”text/javascript” src=”js/paging.js”></script>

[/php]

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

[php]

<?php
$perPage = 3;
if($_GET){
$page=$_GET['page'];
}

$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 '

‘;
echo ‘

‘;
echo ‘

‘;
echo ‘

‘;
echo ‘

‘;
echo ‘

‘;
}

?>

Name Address Sex Contact#
‘ .$row[‘NAME’].’ ‘. $row[‘ADDRESS’].’ ‘. $row[‘SEX’].’ ‘. $row[‘CONTACT’].’

[/php]

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

[jquery]

/** method for paging without refreshing the page. */
jQuery(document).ready(function(){

//Default Starting Page Results
jQuery(“#pagination”)
jQuery(“#pagination li:first”)
.css({‘color’ : ‘#FF0084’}).css({‘border’ : ‘none’});

/* load the first page */
jQuery(“#content”).load(“loaddata.php?page=1”, jQuery(“#loader”).fadeOut(‘slow’));

/** create a click eventhandler for the pager */
jQuery(“#pagination li”).click(function(){

// set the loading Image
jQuery(“#loader”).fadeIn(900,0);
jQuery(“#loader”).html(“<img src=’img/loader.gif’ height=’50%’ width=’100%’ />”);

/** 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’});

var page_number = this.id;
jQuery(“#content”).load(“loaddata.php?page=” + page_number, jQuery(“#loader”).fadeOut(‘slow’));
});

});

[/jquery]

 

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 – [email protected]
Mobile No. – 09305235027 – tnt

Download Complete Sourcecode here.

1 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

This site uses Akismet to reduce spam. Learn how your comment data is processed.