用ajax+js+dom+php+mysql,方百度goole的分页~~~~~~~~哦！
思路：
分页的实现逻辑
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 οnlοad="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>
用ajax+js+dom+php+mysql,方百度goole的分页~~~~~~~~哦！相关推荐
- id ajax,AJAX_ajax.js里面有内容显示效果，根据ID，ajax.js里面有内容显示效果，根 - phpStudy...
ajax.js里面有内容显示效果,根据ID ajax.js里面有内容显示效果,根据ID 复制代码 代码如下: var http_request = false; var success=false; ...
- js DOM Element属性和方法整理
js DOM Element属性和方法整理 节点操作,属性 1. childNodes.children 这两个属性获取到的子节点会根据浏览器的不同而不同的,所以一定要判断下nodeType是否为1. ...
- ajax与DOM的使用,AJAX和DOM的运行经验
AJAX和DOM的运行经验 更新时间:2007年03月07日 00:00:00 作者: 被AJAX中DOM的操作郁闷了好几天,今天总算搞明白了,自学就是苦啊,苦的一把鼻涕一把泪的, 把教训些出来, ...
- ajax json 渲染 html,jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
本文实例讲述了jquery+ajax+js实现请求json格式数据并渲染到html页面操作.分享给大家供大家参考,具体如下: 1.先给json格式的数据: [ {"id":1,&q ...
- java+js实现人脸识别-基于百度api
java+js实现人脸识别-基于百度api 我的第一次分享 第一步-我们了解下实现的思路 代码部分:1.js代码 2.后台代码 3.如何使用百度大脑 4.如何使用 navigator.mediaDev ...
- 判断是否移动端设备的JS代码，超短，百度都用它
为什么80%的码农都做不了架构师?>>> 大多数人都使用跳转适配的方式实现PC端到移动端的网页转换,而大多数人又是使用通过判断UA的方法来区分PC端还是移动端,思路一样,但代码 ...
- java创建node类型数据类型_[Java教程]js DOM Node类型
[Java教程]js DOM Node类型 0 2015-12-18 16:00:08 DOM(文档对象模型)是针对HTML和 DOM可以将任何HTML或 以下面为例: My article Hell ...
- php中如何调用datepicker,如何使用datepicker，ajax，php，mysql在两个日期之间生成报告？...
我被赋予了使用datepicker,ajax,php和mysql在两个给定日期之间生成报告的任务.以下是我的html: 日期明智的报告 From date: To date: User informa ...
- nodejs mysql备份_node.js实现备份mysql数据库功能
node.js实现备份mysql数据库功能 发布时间:2019-10-09编辑:星王 原创 阅读(1697) 在node.js上实现备份mysql数据库到指定文件夹内,并且能够同步执行操作,首要是对m ...
最新文章
- C#编程语言与面向对象——继承
- python【数据结构与算法】Graph（图）的总结
- Flask框架(flask中的蓝图Blueprint)
- 深度优先搜索知识总结
- 在vscode上编写jsp_使用vscode高效编写博客园博客
- Android音乐播放器高级开发
- Python-JS (JS介绍~JS的基础数据类型)
- 为导入的项目更改cvs用户名
- android的log.v,Android Log.v(),Log.d(),Log.i(),Log.w(),Log.e() - 何时使用每一个？
- 编译cloog for gcc 4.8.5 问题
- 关于改进建议几个方面的有效实践
- java 原子量_Java线程：原子量
- 普通话测试-短文60篇文章，附带拼音（1-10篇）
- 各层电子数排布规则_按照核外电子排布规律：各电子层最多容纳电子数2n2（n为电子层数，...
- C#编程学习27: C#操作Excel从入门到精通
- 浅析 Qemu 热迁移特性——Multifd
- PMBOK项目管理知识体系包括哪几个知识领域？
- 华中科技大学和华为云瑶光造就中国团队全球首冠
- Happens-Before原则
- 中国N-环己基吡咯烷酮市场深度研究分析报告