Saturday, July 20, 2013

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.

  1. index.php
  2. pagination.php
  3. db.php
  4. indexscript
  5. 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>

try this code. see the demo.

RELATED POSTS:

Get support with foreign and regional language in php and mysql

Username live availability Check using php and Ajax

Create custom file chosen input type using Css and Jquery

Choose state and city based on country using Jquery


Facebook style Scroll bar using Jquery


Browser full screen API using Query


Facebook Style Textarea Auto Grow Using JQuery Plugin and Css


Floating menu using Jquery plugin


Better and Flexible Tooltip using LiteTooltip.js

5 comments:

  1. sir how can i control the number of link to be displayed in the li based on the database records?

    ReplyDelete
  2. Thanks dear.. Always helpful ...FROM MAURITIUS

    ReplyDelete