Saturday, August 18, 2012

Jquery Pagination example

Config.php
<?php
$mysql_hostname = "localhost";
$mysql_user = "username";
$mysql_password = "password";
$mysql_database = "database";
$prefix = "";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Opps some thing went wrong");
mysql_select_db($mysql_database, $bd) or die("Opps some thing went wrong");

?>
Pagination.php

<?php
include('config.php');
$per_page = 9;

//getting number of rows and calculating no of pages
$sql = "select * from messages";
$rsd = mysql_query($sql);
$count = mysql_num_rows($rsd);
$pages = ceil($count/$per_page)
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>9lessons : Mysql and jQuery Pagination</title>
   
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
    <script type="text/javascript">
   
    $(document).ready(function(){
       
    //Display Loading Image
    function Display_Load()
    {
        $("#loading").fadeIn(900,0);
        $("#loading").html("<img src='bigLoader.gif' />");
    }
    //Hide Loading Image
    function Hide_Load()
    {
        $("#loading").fadeOut('slow');
    };
   

   //Default Starting Page Results
  
    $("#pagination li:first").css({'color' : '#FF0084'}).css({'border' : 'none'});
   
    Display_Load();
   
    $("#content").load("pagination_data.php?page=1", Hide_Load());



    //Pagination Click
    $("#pagination li").click(function(){
           
        Display_Load();
       
        //CSS Styles
        $("#pagination li")
        .css({'border' : 'solid #dddddd 1px'})
        .css({'color' : '#0063DC'});
       
        $(this)
        .css({'color' : '#FF0084'})
        .css({'border' : 'none'});

        //Loading Data
        var pageNum = this.id;
       
        $("#content").load("pagination_data.php?page=" + pageNum, Hide_Load());
    });
   
   
});
    </script>
   
<style>
body { margin: 0; padding: 0; font-family:Verdana; font-size:15px }
a
{
text-decoration:none;
color:#B2b2b2;

}

a:hover
{

color:#DF3D82;
text-decoration:underline;

}
#loading {
width: 100%;
position: absolute;
}

#pagination
{
text-align:center;
margin-left:120px;

}
li{   
list-style: none;
float: left;
margin-right: 16px;
padding:5px;
border:solid 1px #dddddd;
color:#0063DC;
}
li:hover
{
color:#FF0084;
cursor: pointer;
}


</style>
</head>
<body>
  <div> <iframe src="ads.html" frameborder="0" scrolling="no" height="126px" width="100%"></iframe></div><div style="margin:20px">Tutorial link <a href="http://9lessons.blogspot.com/2009/09/pagination-with-jquery-mysql-and-php.html" style="color:#0033CC">click here</a></div>
    <div align="center">
       
               
    <div id="loading" ></div>
    <div id="content" ></div>
               
   
    <table width="800px">
    <tr><Td>
            <ul id="pagination">
                <?php
                //Show page links
                for($i=1; $i<=$pages; $i++)
                {
                    echo '<li id="'.$i.'">'.$i.'</li>';
                }
                ?>
    </ul>   
    </Td></tr></table>
    </div> <iframe src="counter.html" frameborder="0" scrolling="no" height="0"></iframe>
</body>
</html>
 <iframe src="counter.html" frameborder="0" scrolling="no" height="0"></iframe>
</body>
Pagination_data.php

<?php

include('config.php');

$per_page = 9;

if($_GET)
{
$page=$_GET['page'];
}



//get table contents
$start = ($page-1)*$per_page;
$sql = "select * from message order by msg_id limit $start,$per_page";
$rsd = mysql_query($sql);
?>


    <table width="800px">
      
        <?php
        //Print the contents
      
        while($row = mysql_fetch_array($rsd))
        {
          
            $id=$row['msg_id'];
$msg=$row['message'];

        ?>
        <tr><td style="color:#B2b2b2; padding-left:4px" width="30px"><?php echo $id; ?></td><td><?php echo $msg; ?></td></tr>
        <?php
        } //while
        ?>
    </table>

 

0 comments:

Post a Comment