信息类网站往往存在数据量过大的缺,想要达到迅速查找一般有两个方法,一是使用搜索,二是使用分页技术
今天我要讲的是分页技术,想要实现分页技术主要有三个部分
1.前端页面的静态搭建,我在建网站的时候运用的Bootstrap的css样式
<nav>
<ul class="pagination">
<li>
<a href="javascript:void(0);"οnclick="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);"οnclick="checkPage(6)" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
2.我们要对于输出的数据数量进行限制(规定每页的输出数量)
<?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;
}
4.ajax请求界面
<?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));
}
?>
通过这样我们就是实现了分页技术