Pagination With Jquery, Ajax And Php

Pagination With Jquery, Ajax And Php Web-development (jquery) Pagination With Jquery, Ajax And Php

Pagination with jquery, Ajax and PHP

Download

//index.php <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ function loading_show(){ $('#loading').html("<img src='images/loading.gif'/>").fadeIn('fast'); } function loading_hide(){ $('#loading').fadeOut('fast'); } function loadData(page){ loading_show(); $.ajax ({ type: "POST", url: "load_data.php", data: "page="+page, success: function(msg) { $("#container").ajaxComplete(function(event, request, settings) { loading_hide(); $("#container").html(msg); }); } }); } loadData(1); // For first time page load default results $('#container .pagination li.active').live('click',function(){ var page = $(this).attr('p'); loadData(page); }); $('#go_btn').live('click',function(){ var page = parseInt($('.goto').val()); var no_of_pages = parseInt($('.total').attr('a')); if(page != 0 && page <= no_of_pages){ loadData(page); }else{ alert('Enter a PAGE between 1 and '+no_of_pages); $('.goto').val("").focus(); return false; } }); }); </script> <style type="text/css"> body{ width: 800px; margin: 0 auto; padding: 0; } #loading{ width: 100%; position: absolute; top: 100px; left: 100px; margin-top:200px; } #container .pagination ul li.inactive, #container .pagination ul li.inactive:hover{ background-color:#ededed; color:#bababa; border:1px solid #bababa; cursor: default; } #container .data ul li{ list-style: none; font-family: verdana; margin: 5px 0 5px 0; color: #000; font-size: 13px; } #container .pagination{ width: 800px; height: 25px; } #container .pagination ul li{ list-style: none; float: left; border: 1px solid #006699; padding: 2px 6px 2px 6px; margin: 0 3px 0 3px; font-family: arial; font-size: 14px; color: #006699; font-weight: bold; background-color: #f2f2f2; } #container .pagination ul li:hover{ color: #fff; background-color: #006699; cursor: pointer; } .go_button { background-color:#f2f2f2;border:1px solid #006699;color:#cc0000;padding:2px 6px 2px 6px;cursor:pointer;position:absolute;margin-top:-1px;margin-left:3px; } .total { float:right;font-family:arial;color:#999; } </style> <div align="center">Pagination with jquery, Ajax and PHP</div> <div></div> <div> <div></div> <div></div> </div> 

//load_data.php <?php if($_POST['page']) { $page = $_POST['page']; $cur_page = $page; $page -= 1; $per_page = 15; $previous_btn = true; $next_btn = true; $first_btn = true; $last_btn = true; $start = $page * $per_page; include"db.php"; $query_pag_data = "SELECT mes_id,message from messages LIMIT $start, $per_page"; $result_pag_data = mysql_query($query_pag_data) or die('MySql Error' . mysql_error()); $msg = ""; while ($row = mysql_fetch_array($result_pag_data)) { $htmlmsg=htmlentities($row['message']); $msg .= "<li><b>" . $row['mes_id'] . "</b> " . $htmlmsg . "</li>"; } $msg = "<div><ul>" . $msg . "</ul></div>"; // Content for Data /* --------------------------------------------- */ $query_pag_num = "SELECT COUNT(*) AS count FROM messages"; $result_pag_num = mysql_query($query_pag_num); $row = mysql_fetch_array($result_pag_num); $count = $row['count']; $no_of_paginations = ceil($count / $per_page); /* ---------------Calculating the starting and endign values for the loop----------------------------------- */ if ($cur_page >= 7) { $start_loop = $cur_page - 3; if ($no_of_paginations > $cur_page + 3) $end_loop = $cur_page + 3; else if ($cur_page <= $no_of_paginations && $cur_page > $no_of_paginations - 6) { $start_loop = $no_of_paginations - 6; $end_loop = $no_of_paginations; } else { $end_loop = $no_of_paginations; } } else { $start_loop = 1; if ($no_of_paginations > 7) $end_loop = 7; else $end_loop = $no_of_paginations; } /* ----------------------------------------------------------------------------------------------------------- */ $msg .= "<div><ul>"; // FOR ENABLING THE FIRST BUTTON if ($first_btn && $cur_page > 1) { $msg .= "<li p='1'>First</li>"; } else if ($first_btn) { $msg .= "<li p='1'>First</li>"; } // FOR ENABLING THE PREVIOUS BUTTON if ($previous_btn && $cur_page > 1) { $pre = $cur_page - 1; $msg .= "<li p='$pre'>Previous</li>"; } else if ($previous_btn) { $msg .= "<li>Previous</li>"; } for ($i = $start_loop; $i <= $end_loop; $i++) { if ($cur_page == $i) $msg .= "<li p='$i'>{$i}</li>"; else $msg .= "<li p='$i'>{$i}</li>"; } // TO ENABLE THE NEXT BUTTON if ($next_btn && $cur_page < $no_of_paginations) { $nex = $cur_page + 1; $msg .= "<li p='$nex'>Next</li>"; } else if ($next_btn) { $msg .= "<li>Next</li>"; } // TO ENABLE THE END BUTTON if ($last_btn && $cur_page < $no_of_paginations) { $msg .= "<li p='$no_of_paginations'>Last</li>"; } else if ($last_btn) { $msg .= "<li p='$no_of_paginations'>Last</li>"; } $goto = "<input type='text' size='1'/><input type='button' value='Go'/>"; $total_string = "<span a='$no_of_paginations'>Page <b>" . $cur_page . "</b> of <b>$no_of_paginations</b></span>"; $msg = $msg . "</ul>" . $goto . $total_string . "</div>"; // Content for pagination echo $msg; } 

//db.php <?php $mysql_hostname = "localhost"; $mysql_user = "root"; $mysql_password = "ednalan"; $mysql_database = "dbname"; $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"); ?> 

Posted by Hodie J