信息类网站每每存在数据量过大的缺,想要达到迅速查找通常有两个方法,一是使用搜索,二是使用分页技术javascript
今天我要讲的是分页技术,想要实现分页技术主要有三个部分php
1.前端页面的静态搭建,我在建网站的时候运用的Bootstrap的css样式css
<nav> <ul class="pagination"> <li> <a href="javascript:void(0);"onclick="checkPage(0)" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li><a href="javascript:void(0);"onClick="checkPage(1)">1</a></li> <li><a href="javascript:void(0);"onClick="checkPage(2)">2</a></li> <li><a href="javascript:void(0);"onClick="checkPage(3)">3</a></li> <li><a href="javascript:void(0);"onClick="checkPage(4)">4</a></li> <li><a href="javascript:void(0);"onClick="checkPage(5)">5</a></li> <li class="nav_First"> <a href="javascript:void(0);"onclick="checkPage(6)" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav>
2.咱们要对于输出的数据数量进行限制(规定每页的输出数量)html
<?php session_start();?> <?php include "mysql_connect.php" ?> <link rel="stylesheet" href="css/indexPage2.css" /> <?php $sql=mysql_query("select title,datetime,author,id,honor from article order by id desc limit 0,10"); $result=mysql_fetch_array($sql); if($result==false){ echo "<font color=#ff0000>对不起,没有博客!</font>"; }else{ do{ ?> <div class="list_Content"> <div class="list_List"> <div class="list_Title"> <a href="showarticletest.php?id=<?php echo $result['id']; ?>"><?php echo $result['title'];?></a> </div> <div class="list_imformation"> <div class="list_detail"> <p><span><?php echo $result['datetime'];?></span> 做者:<?php echo $result['author'];?></p> </div> <div class="list_honor"> <div class="left_bar"> <div class="left_bar_srcimage" > <div class="dislike"></div> </div> <div class="left_bar_number"> <?php echo $result['honor'];?> </div> </div> <div class="right_bar"> <div class="right_bar_comment" > <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> </div> <div class="right_bar_number"> <?php $sql1=mysql_query("select times from article where title='$result[title]'"); $result1=mysql_fetch_array($sql1); echo $result1['times']; ?> </div> </div> </div> </div> </div> <div class="list_Image"> <img src="image/001.jpg"> </div> </div> <?php }while($result=mysql_fetch_array($sql)); } ?>咱们在这里呈现了前十的数据
3.对分页按钮的js设置,具体经过ajax设计的前端
// JavaScript Document var xmlhttp; function checkPage(cap){ xmlhttp=CreateXmlHttp(); if(xmlhttp==null){ alert("建立xmlhttprequest对象失败"); } var url="indexPage1.php" var url=url+"?q="+cap; var url=url+"&id="+Math.random(); xmlhttp.onreadystatechange=statechanged; xmlhttp.open("GET",url,true); xmlhttp.send(null); } //建立URL,以及用open方法获取checkcap.php来实现异步传输。 function statechanged(){ if(xmlhttp.readyState==4&&xmlhttp.status==200){ document.getElementById("wz").innerHTML=xmlhttp.responseText; } } //获取xmlhttprequest的状态,并将返回的内容输出 function CreateXmlHttp(){ var xmlhttp=null; try{ xmlhttp=new XMLHttpRequest(); } catch(e){ try{ xmlhttp=new ActiveXObject(Msxml2.XMLHTTP); } catch(e){ xmlhttp=new ActiveXObject(Microsoft.XMLHTTP); } } return xmlhttp; }
<?php session_start();?> <?php include "mysql_connect.php" ?> <link rel="stylesheet" href="css/indexPage2.css" /> <script type="text/javascript" src="js/like.js" ></script> <?php $CurrentPageID=$_GET['q']; if($CurrentPageID!=0&&$CurrentPageID!=6){ $_SESSION['Page']=$CurrentPageID; } elseif($CurrentPageID==null){ $_SESSION['Page']=1; } if($CurrentPageID==0){ if($_SESSION['Page']==1){ $sql=mysql_query("select title,datetime,author,ar_content,id,honor from article order by id desc limit 0,10"); } elseif($_SESSION['Page']==2){ $_SESSION['Page']=1; $sql=mysql_query("select title,datetime,author,ar_content,id,honor from article order by id desc limit 0,10"); } elseif($_SESSION['Page']==3){ $_SESSION['Page']=2; $sql=mysql_query("select title,datetime,author,ar_content,id,honor from article order by id desc limit 10,10"); } elseif($_SESSION['Page']==4){ $_SESSION['Page']=3; $sql=mysql_query("select title,datetime,author,ar_content,id,honor from article order by id desc limit 20,10"); } elseif($_SESSION['Page']==5){ $_SESSION['Page']=4; $sql=mysql_query("select title,datetime,author,ar_content,id,honor from article order by id desc limit 30,10"); } } elseif($CurrentPageID==6){ if($_SESSION['Page']==1){ $_SESSION['Page']=2; $sql=mysql_query("select title,datetime,author,ar_content,id,honor from article order by id desc limit 10,10"); } elseif($_SESSION['Page']==2){ $_SESSION['Page']=3; $sql=mysql_query("select title,datetime,author,ar_content,id,honor from article order by id desc limit 20,10"); } elseif($_SESSION['Page']==3){ $_SESSION['Page']=4; $sql=mysql_query("select title,datetime,author,ar_content,id,honor from article order by id desc limit 30,10"); } elseif($_SESSION['Page']==4){ $_SESSION['Page']=4; $sql=mysql_query("select title,datetime,author,ar_content,id,honor from article order by id desc limit 40,10"); } elseif($_SESSION['Page']==5){ $_SESSION['Page']=5; $sql=mysql_query("select title,datetime,author,ar_content,id,honor from article order by id desc limit 40,10"); } } elseif($CurrentPageID==1){ $_SESSION['Page']=$CurrentPageID; $sql=mysql_query("select title,datetime,author,ar_content,id,honor from article order by id desc limit 0,10");} elseif($CurrentPageID==2){ $_SESSION['Page']=$CurrentPageID; $sql=mysql_query("select title,datetime,author,ar_content,id,honor from article order by id desc limit 10,10"); } elseif($CurrentPageID==3){ $_SESSION['Page']=$CurrentPageID; $sql=mysql_query("select title,datetime,author,ar_content,id,honor from article order by id desc limit 20,10"); } $result=mysql_fetch_array($sql); if($result==false){ echo "<font color=#ff0000>对不起,没有博客!</font>"; }else{ do{ ?> <div class="list_Content"> <div class="list_List"> <div class="list_Title"> <a href="showarticletest.php?id=<?php echo $result['id']; ?>"><?php echo $result['title'];?></a> </div> <div class="list_imformation"> <div class="list_detail"> <p><span><?php echo $result['datetime'];?></span> 做者:<?php echo $result['author'];?></p> </div> <div class="list_honor"> <div class="left_bar"> <div class="left_bar_srcimage" > <div class="dislike"></div> </div> <div class="left_bar_number"> <?php echo $result['honor'];?> </div> </div> <div class="right_bar"> <div class="right_bar_comment" > <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> </div> <div class="right_bar_number"> <?php $sql1=mysql_query("select times from article where title='$result[title]'"); $result1=mysql_fetch_array($sql1); echo $result1['times']; ?> </div> </div> </div> </div> </div> <div class="list_Image"> <img src="image/001.jpg"> </div> </div><?php }while($result=mysql_fetch_array($sql)); } ?>经过这样咱们就是实现了分页技术