Simple Pagination with loading effect using Qjuery, PHP and MySql

Simple Pagination is the matter of showing limited data in a particular page, here i'm using Jquery, php, mysql. if we have more number of data in a single page, we just make it to show a particular data in a page. for that we are using this pagination. just know how the pagination works and know some of the details about pagination and how to make it without page refreshing, let see the tutorial.

DOWNLOAD LIVE DEMO

in this pagination system, we just use three things Jquery,PHP, and mysql database, and here we see what are all needed for this pagination system.

index.php
pagination.php
db.php
indexscript
Jquery.min.js

the above all files are needed to run this pagination.

database name -->2my4edge

table name --> pagination

column names --> id, name, designation, place

DB.PHP

<?php
$mysql_hostname = "localhost";
$mysql_user = "root";
$mysql_password = "";
$mysql_database = "2my4edge";
$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>