Jquery.min.js
the above all files are needed to run this pagination.
database name -->phpmvcbug
table name --> pagination
column names --> id, name, designation, place
DB.PHP
<?php
$mysql_hostname = "localhost";
$mysql_user = "root";
$mysql_password = "";
$mysql_database = "phpmvcbug";
$con = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Opps some thing went wrong");
mysql_select_db($mysql_database, $con) or die("Opps some thing went wrong");
?>
PAGINATION.PHP
include the database file, and assign the number of data have to view in the page. then follow the below code.
<?php
include('db.php');
$per_page = 4;
if($_GET)
{
$page=$_GET['page'];
}
$start = ($page-1)*$per_page;
$select_table = "select * from pagination order by id limit $start,$per_page";
$variable = mysql_query($select_table);
?>
<table width="800px">
<?php
$i=1;
while($row = mysql_fetch_array($variable))
{
$name=$row['name'];
$design=$row['designation'];
$place=$row['place'];
?>
<tr>
<td style="color:#999;"><?php echo $i++; ?></td>
<td><?php echo $name; ?></td>
<td><?php echo $design; ?></td>
<td><?php echo $place; ?></td></tr>
<?php
}
?>
</table>
SCRIPT
the script is comes under in the page of index or where you need it.
just call the script with as what have you assigned in the page, make it
for as the coding is given by you.
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function Display_Load()
{
$("#load").fadeIn(1000,0);
$("#load").html("<img src='load.gif' />");
}
function Hide_Load()
{
$("#load").fadeOut('slow');
};
$("#paginate li:first").css({'color' : '#FF0084'}).css({'border' : 'none'});
Display_Load();
$("#content").load("pagination.php?page=1", Hide_Load());
$("#paginate li").click(function(){
Display_Load();
$("#paginate li")
.css({'border' : 'solid #193d81 1px'})
.css({'color' : '#0063DC'});
$(this)
.css({'color' : '#FF0084'})
.css({'border' : 'none'});
var pageNum = this.id;
$("#content").load("pagination.php?page=" + pageNum, Hide_Load());
});
});
</script>
INDEX.PHP
first add the database file, and assign the number, how many data have to view in page. then select the table to fetch the data.
<?php
include('db.php');
$per_page = 4;
$select_table = "select * from pagination";
$variable = mysql_query($select_table);
$count = mysql_num_rows($variable);
$pages = ceil($count/$per_page)
?>
<body>
<div id="content" ></div>
<div class="link" align="center">
<ul id="paginate">
<?php
for($i=1; $i<=$pages; $i++)
{
echo '<li id="'.$i.'">'.$i.'</li>';
}
?>
</ul>
</div>
<div style="clear:both"></div>
<div id="load" align="center" ></div>
</body>
CSS
make as you need for you design with the
CSS.
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family:Tahoma, Geneva, sans-serif;
font-size:18px;
}
#content{
margin:0 auto;
border:0px green dashed;
width:800px;
min-height:150px;
margin-top:100px;
}
#load {
width:30px;
padding-top:50px;
border:0px green dashed;
margin:0 auto;
}
#paginate
{
text-align:center;
border:0px green solid;
width:500px;
margin:0 auto;
}
.link{
width:800px;
margin:0 auto;
border:0px green solid;
}
li{
list-style: none;
float: left;
margin-right: 16px;
padding:5px;
border:solid 1px #193d81;
color:#0063DC;
}
li:hover
{
color:#FF0084;
cursor: pointer;
}
</style>
try this code.
Useful blog admin, your coding clearly explains about Simple Pagination With Loading Effect Using Qjuery, PHP And MySql. Keep up the good work and share more.
ReplyDeleteMobile Application Training in Chennai | Mobile Application Testing Training in Chennai