css
<style type="text/css"> #loading{ position: absolute; top: 200px; left:400px; } #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; margin: 5px 0 5px 50px; color: #000; font-size: 14px; } #container .pagination{ width: 1000px; 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; } .total{ float:left;font-family:arial;color:#999; } </style>
js
<script type="text/javascript"> $(document).ready(function(){ function loading_show(){ $(‘#loading‘).html("<img src=‘./loading.gif‘/>").fadeIn(‘fast‘); } function loading_hide(){ $(‘#loading‘).fadeOut(‘fast‘); } function loadData(page){ loading_show(); $.ajax({ type: "POST", url: "load.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>
html
<script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script> <div id="main"> <div id="loading"></div> <div id="container"> <div class="data"></div> <div class="pagination"></div> </div> </div>
php
<?php if($_POST[‘page‘]){ $page = $_POST[‘page‘]; //当前页数 $cur_page = $page; //当前页数 $page -= 1; $per_page = 10; $previous_btn = true; $next_btn = true; $first_btn = true; $last_btn = true; $start = $page * $per_page; //0 10 20 30 40 第一页：page = 1 //数据库配置信息 define("HOST","localhost"); //主机名 define("USER","root"); //账号 define("PASS","root"); //密码 define("DBNAME","waterfall"); //数据库名 $link = mysql_connect("localhost","root","root")or die("连接数据库失败:".mysql_error()); mysql_select_db("waterfall",$link); mysql_query("set NAMES ‘utf8‘"); $query_page_data = "SELECT * FROM `content` LIMIT $start, $per_page"; $result_page_data = mysql_query($query_page_data) or die(‘MySql Error‘ . mysql_error()); $msg = ""; while ($row = mysql_fetch_array($result_page_data)) { $htmlmsg=htmlspecialchars($row[‘img‘]); $msg .= "<li><b>" . $row[‘id‘] . "</b> " . $htmlmsg . "</li>"; } $msg = "<div class=‘data‘><ul>" . $msg . "</ul></div>"; // 数据内容 /* --------------------------------------------- */ $query_pag_num = "SELECT COUNT(*) AS count FROM content"; $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); /* ---------------计算该循环的起始和endign值----------------------------------- */ 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 class=‘pagination‘><ul>"; // 为使第一个按钮 if ($first_btn && $cur_page > 1) { $msg .= "<li p=‘1‘ class=‘active‘>First</li>"; } else if ($first_btn) { $msg .= "<li p=‘1‘ class=‘inactive‘>First</li>"; } // 为使上一个按钮 if ($previous_btn && $cur_page > 1) { $pre = $cur_page - 1; $msg .= "<li p=‘$pre‘ class=‘active‘>Previous</li>"; } else if ($previous_btn) { $msg .= "<li class=‘inactive‘>Previous</li>"; } for ($i = $start_loop; $i <= $end_loop; $i++) { if ($cur_page == $i) $msg .= "<li p=‘$i‘ style=‘color:#fff;background-color:#006699;‘ class=‘active‘>{$i}</li>"; else $msg .= "<li p=‘$i‘ class=‘active‘>{$i}</li>"; } // 为使下一个按钮 if ($next_btn && $cur_page < $no_of_paginations) { $nex = $cur_page + 1; $msg .= "<li p=‘$nex‘ class=‘active‘>Next</li>"; } else if ($next_btn) { $msg .= "<li class=‘inactive‘>Next</li>"; } // 要启用结束按钮 if ($last_btn && $cur_page < $no_of_paginations) { $msg .= "<li p=‘$no_of_paginations‘ class=‘active‘>Last</li>"; } else if ($last_btn) { $msg .= "<li p=‘$no_of_paginations‘ class=‘inactive‘>Last</li>"; } $goto = "<input type=‘text‘ class=‘goto‘ size=‘1‘ style=‘float:left;margin-top:-1px;margin-left:60px;‘/><input type=‘button‘ id=‘go_btn‘ class=‘go_button‘ value=‘Go‘/>"; $total_string = "<span style=‘float:left;margin-left:40px;‘ class=‘total‘ a=‘$no_of_paginations‘>Page <b>" . $cur_page . "</b> of <b>$no_of_paginations</b></span>"; $msg = $msg . "</ul>" . $goto . $total_string . "</div>"; // 为分页内容 echo $msg; } ?>