web分页技术

信息类网站每每存在数据量过大的缺,想要达到迅速查找通常有两个方法,一是使用搜索,二是使用分页技术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;
	
	}

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));
}
?>
经过这样咱们就是实现了分页技术