PHP寥寥几行代码轻松实现百度搜索那样的分页列表和导航链接,某些语言的拥趸哭晕在厕所.
1<?php 2 3$app = array( 4 'db_prefix' => 'phpbest_', 5 'db_sqlite' => '/dev/shm/phpbest/phpbest.db3', 6); 7 8//数据库连接单例 9function db() { 10 global $app; 11 static $db; 12 if($db) { 13 return $db; 14 } else { 15 try { 16 $db = new PDO('sqlite:'.$app['db_sqlite']); 17 } catch(PDOException $e) { 18 echo $e->getMessage(); 19 exit(); 20 } 21 return $db; 22 } 23} 24 25//分页导航链接 26function page_nav($page, $page_size = 10, $before = 5, $after = 4) { 27 $page = intval($page); 28 $page_size = intval($page_size); 29 global $app; 30 $db = db(); 31 $table = $app['db_prefix'].'post'; 32 $arr = $db->query("SELECT count(id) FROM $table")->fetchAll(PDO::FETCH_NUM); 33 $records = $arr[0][0]; //记录数 34 $pages = ceil($records/$page_size); //页数 35 if($pages == 0) return; 36 if($page <= 0 || $page > $pages) return; 37 38 $html = '<p>当前页:前输出5页,后输出4页</p>'; 39 $html .= '<a href="?page=1">最前</a>'; 40 if($page != 1) { $html .= '<a href="?page='.($page - 1).'">上一页</a>'; } 41 if($page <= $before) { for($i = 1; $i < $page; $i++) { $html .= '<a href="?page='.$i.'">第'.$i.'页</a>'; } } 42 else { for($i = $page - $before; $i < $page; $i++) { $html .= '<a href="?page='.$i.'">第'.$i.'页</a>'; } } 43 $html .= '<a href="?page='.$page.'">第'.$page.'页(当前页)</a>'; 44 if($pages >= $page + $after) { for($i = $page + 1; $i <= $page + $after; $i++) { $html .= '<a href="?page='.$i.'">第'.$i.'页</a>'; } } 45 else { for($i = $page + 1; $i <= $pages; $i++) { $html .= '<a href="?page='.$i.'">第'.$i.'页</a>'; } } 46 if($page != $pages) { $html .= '<a href="?page='.($page + 1).'">下一页</a>'; } 47 $html .= '<a href="?page='.$pages.'">最后</a>'; 48 return $html; 49} 50 51//分页列表内容 52function page_list($page, $page_size = 10) { 53 $page = intval($page); 54 $page_size = intval($page_size); 55 global $app; 56 $db = db(); 57 $table = $app['db_prefix'].'post'; 58 $offset = ($page - 1) * $page_size; 59 return $db->query("SELECT * FROM $table ORDER BY id DESC LIMIT $page_size OFFSET $offset")->fetchAll(PDO::FETCH_ASSOC); 60} 61 62?> 63 64<div class="content pjax"> 65 <?php echo page_nav($_GET['page'], 2); ?> 66 <ul> 67 <?php 68 foreach(page_list($_GET['page'], 2) as $v) { 69 echo '<li>'.$v['id'].'</li>'; 70 echo '<li>'.$v['title'].'</li>'; 71 echo '<li>'.$v['content'].'</li>'; 72 echo '<li>'.date('Y-m-d H:i:s', strtotime($v['date'])).'</li><br>'; 73 } 74 ?> 75 </ul> 76</div> 77<script type="text/javascript" src="jquery.pjax.js"></script> 78<script> 79(function($){ 80 $(function(){ 81 //调用插件,用户点击链接后局部刷新class为pjax(要求唯一)的块并写入历史记录 82 $(document).pjax("a:not([target='_blank'])", ".pjax"); 83 }); 84})(jQuery); 85</script>
jquery.pjax.js是我写的一个插件,代码简单到差不多每个人都看得懂:
1/* jquery.pjax.js */ 2(function($){ 3 $.fn.pjax = function(selector, container) { 4 5 //IE8之流不支持HTML5 onpopstate,自然不会执行插件 6 if("onpopstate" in window) { 7 8 //AJAX加载函数 9 var load = function(href) { 10 var time = 600; 11 $(document).trigger("pjax:start", [time]); //执行开发者的自定义事件(如:显示加载进度条) 12 var start = new Date().getTime(); 13 $.ajax({ 14 type: "GET", 15 url: href, 16 data: {_pjax_: new Date().getTime()} 17 }).done(function(data){ 18 //在回调函数中解析出head中的title和body中的指定块并更新(这样服务器端就不需要改变输出格式) 19 var dom = $("<div>").html(data); 20 document.title = dom.find("title").first().text(); 21 $(container).first().html(dom.find(container).first().html()); 22 var spend = new Date().getTime() - start; 23 setTimeout(function(){ 24 $(document).trigger("pjax:done"); //执行开发者的自定义事件(如:隐藏加载进度条) 25 }, spend >= time ? 0 : time - spend); 26 }); 27 }; 28 29 history.replaceState({href:location.href}, "", location.href); 30 31 window.onpopstate = function() { 32 //用户点击后退和前进按钮时触发该事件 33 if(history.state != null) { 34 load(history.state.href); 35 } 36 } 37 38 $(container).on("click", selector, function(e){ 39 //用户点击页面链接时改变地址栏(URL)并写入历史记录以及AJAX加载页面 40 e.preventDefault(); 41 var href = $(this).attr("href"); 42 if(href != "javascript:void(0)") { 43 history.pushState({href:href}, "", href); 44 load(href); 45 } 46 }); 47 } 48 }; 49})(jQuery);
不支持PJAX的浏览器如IE8会自动退化成原始的链接打开的方式,所以采用PJAX的站点也是可以兼容IE8的.