您的位置：首页 > 编程语言 > PHP开发

用ajax+js+dom+php+mysql,方百度goole的分页~~~~~~~~哦！

2012-03-09 16:02 639 查看

思路：

分页的实现逻辑

1.在mysql中如何查询区间数据

limit 起始行，要查询的行数

2.什么是分页

当我们的数据量比较大时候，一页显示不了就分页显示，可以增加用户的体验

3.实现分页的实现思路

分页的变量

1).当前页： nowpage

2).每页的大小 pagesize

3).总页数 pages

上取整（总记录数/每页大小）

怎样才能根据页码取到合适的数据

<?php

/*

几个关键的变量当前页总页数每页大小

*/

include"../include/db_connt.php";

//定义当前页

if(isset($_GET['np'])){

$nowpage=$_GET['np'];

}else{

$nowpage=1;

}

//得到总的记录数

$rs=mysql_query("selectcount(*) from area");

$rownum=mysql_result($rs,0);

//总页数=上取整（总记录数/每页大小）

$pages=ceil($rownum/$F_PAGESIZE);

?>

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>ajax+js+dom+php+mysql,方百度goole的分页</title>

<style>

#tab{

margin:auto auto;

}

#content{

height:450px;

width:600px;

background-color:#CF9;

border:#00C 1px dashed;

border-collapse:collapse;

text-align:center;

}

#num{

height:30px;

width:600px;

background-color:#CCC;

border:#00C 1px dashed;

text-align:center;

}

#table1{

height:450px;

width:600px;

border:#00C 1px solid;

border-collapse:collapse;

}

.one{

background-color:#F99;

}

.two{

background-color:#FF6;

}

.over{

background-color:#00F;

}

</style>

<script language="javascript" type="text/javascript"src="../include/ajaxUtil.js"></script>

<script language="javascript" type="text/javascript"src="../include/Interlaces.js"></script>

<link type="text/css"href="../include/Interlaces.css" rel="alternate stylesheet"/>

<script language="javascript"type="text/javascript">

//------------------显示页码开始部分-----------------------------

var nowPage=<?php echo $nowPage; ?>;

//定义结束页

var endPage=<?php echo $nowPage; ?>;

var pages=<?php echo $pages; ?>;

function initPages(){

//定义开始页

var startPage=1;

/* 做几件事情

1、定义当前页解决在Javascript中使用php定义的变量

2定义开始页

3、定义结束页

4\、定义总页数

*/

//当总页数大于11页时，设定起始页和结束页

if(pages>11){

//要设定起始页码

if(nowPage-10>0){

//如果当前页-10>0则设置起始页=当前页-10，否则不设置。不设置startPage=1；

startPage=nowPage-10;

}

if(nowPage+9<pages){

//如果说当前页+9<总页数；

endPage=nowPage+9;

}else{

endPage=pages;

}

}

//for循环读出页码

var pageNumStr="";

//判断什么时候显示上一页

if(nowPage!=1){

pageNumStr+="<ahref='javascript:getPageDate("+(nowPage-1)+")'>上一页</a>";

}

for(var i=startPage;i<endPage;i++ ){

//判断是否是当前页如果是当前页让页码加粗

if(nowPage==i){

pageNumStr+=" "+i;

}else{

pageNumStr+=" <ahref='javascript:getPageDate("+i+")'>"+i+"</a>";

}

}

if(nowPage<pages){

pageNumStr+="<ahref='javascript:getPageDate("+(nowPage+1)+")'>下一页</a>";

}

$$("num").innerHTML=pageNumStr;

}

//------------------显示页面码部分结束-----------------------------

//------------------显示页面码部分--------------------------

function getPageDate(np){

//根据页码进行ajax异步请求

//alert("*************");

var url1="paging-server.php";

var params="np="+np;

// 调用ajax

get(url1,params,processPageDate);

}

function processPageDate(xhr){

varobj=eval("("+xhr.responseText+")");

//将当前页重新赋值,注意服务器端返回的是字符串

nowPage=parseInt(obj.np);

initPages();

var rows=obj.pageDates;

var pageStr="<table border='1'id='table1'>";

pageStr+="<tr><th>编号</th><th>名称</th><th>编码</th><th>缩写</th><th>拼音</th></tr>";

for(var i=0;i<rows.length;i++){

pageStr+="<tr><td>"+rows[i].id+"</td><td>"+rows[i].name+"</td><td>"+rows[i].code+"</td><td>"+rows[i].p+"</td><td>"+rows[i].l+"</td></tr>";

}

pageStr+="</table>";

$$("content").innerHTML=pageStr;

geHang();

}

</script>

</head>

<body onload="getPageDate(1)">

<table width="500"border="1" id="tab">

<tr>

<td><div id="content"></div></td>

</tr>

<tr>

<td><div id="num" ></div></td>

</tr>

</table>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航