PHP Ajax jQuery 无刷新分页
JS+Ajax+Jquery实现页面无刷新分页以及分组超强的实现
JS+Ajax+Jquery实现页⾯⽆刷新分页以及分组超强的实现复制代码代码如下:<%@ Page language="c#" Codebehind="GroupText.aspx.cs" AutoEventWireup="false" Inherits="test1.GroupText" %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" ><HTML><HEAD><title>GroupText</title><meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1"><meta name="CODE_LANGUAGE" Content="C#"><meta name="vs_defaultClientScript" content="JavaScript"><meta name="vs_targetSchema" content="/intellisense/ie5"><LINK href="css/wmh.css" href="css/wmh.css" type="text/css" rel="stylesheet"><script src="js/jquery.js" type="text/javascript"></script><script src="js/Common.js" type="text/javascript"></script><script src="js/getCommonTable.js" type="text/javascript"></script><script src="js/GroupText.js" type="text/javascript"></script><script language="javascript"><!--var ecid = '100001';var jpstr = "";var pageSize = 8;// --></script></HEAD><body MS_POSITIONING="GridLayout"><form id="Form1" method="post" runat="server"><div class="listDiv" style="height:100%; PADDING-TOP: 2px"><table cellSpacing="0" cellPadding="0" width="100%" border="0"><tr class="dg_header"><td style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; WIDTH: 10%; BORDER-BOTTOM: 1px solid; TEXT-ALIGN: center" >活动名称</td><td style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; WIDTH: 10%; BORDER-BOTTOM: 1px solid; TEXT-ALIGN: center">发送⽅</td><td style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; WIDTH: 10%; BORDER-BOTTOM: 1px solid; TEXT-ALIGN: center">接收⽅</td><td style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; WIDTH: 12%; BORDER-BOTTOM: 1px solid; TEXT-ALIGN: center">发送时间</td><td style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; WIDTH: 38%; BORDER-BOTTOM: 1px solid; TEXT-ALIGN: center">发送内容</td><td style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; WIDTH: 10%; BORDER-BOTTOM: 1px solid; TEXT-ALIGN: center">积分</td><td style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; WIDTH: 10%; BORDER-BOTTOM: 1px solid; TEXT-ALIGN: center">状态</td></tr><tr><td class="dg_line" style="BORDER-BOTTOM: 0px solid" style="BORDER-BOTTOM: 0px solid" vAlign="top" width="100%" colSpan="7"height="100%"><div id="divcontent" style="WIDTH: 100%; HEIGHT: 100%" align="left"></div></td></tr><tr><td class="dg_line" style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid" style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid"width="100%" colSpan="10"><table width="100%"><tr><td class="pgtext">共<span id="recordcount" style="COLOR: red" style="COLOR: red">0</span>条记录 ⽬前第<span id="curpageindex" style="COLOR: red" style="COLOR: red">0</span> <fontcolor="red">/</font><span id="pgcount" style="COLOR: red" style="COLOR: red">0</span>页 <input class="pageText" id="gototxt" type="text" maxLength="10" name="gototxt" runat="server"><input id="gotopg" type="button" class="goBtn"></td><td align="right"><IMG id="btnfirst" style="CURSOR: hand" style="CURSOR: hand" alt="⾸页"src="Images/first.gif"><IMG id="btnpre" style="CURSOR: hand" style="CURSOR: hand" alt="上⼀页"src="Images/btn_pre.gif" > <IMG id="btnnext" style="CURSOR: hand" style="CURSOR: hand" alt="下⼀页"src="Images/btn_next.gif" ><IMG id="btnlast" style="CURSOR: hand" style="CURSOR: hand" alt="尾页"src="Images/btn_last.gif" ></td></tr></table></td></tr></table></div></form></body></HTML>Common.js复制代码代码如下:Common.js://时间格式化function getDateByFormat(oldDate){var Dy = oldDate.getFullYear();var Dm = oldDate.getMonth()+1;var Dd = oldDate.getDate();if(Dm<10){Dm = "0" + Dm;}if(Dd<10){Dd = "0" + Dd;}var newDate = Dy+'-'+Dm+'-'+Dd;return newDate;}//⽇期-时间格式化function getDateTimeByFormat(oldDate){var Dy = oldDate.getFullYear();var Dm = oldDate.getMonth()+1;var Dd = oldDate.getDate();var Dh = oldDate.getHours();var Dmi = oldDate.getMinutes(); var Ds = oldDate.getSeconds(); if(Dm<10)Dm = "0" + Dm;if(Dd<10)Dd = "0" + Dd;if(Dh<10)Dh = "0" + Dh;if(Dmi<10)Dmi = "0" + Dmi;if(Ds<10)Ds = "0" + Ds;var newDate = Dy+'-'+Dm+'-'+Dd+' '+Dh+':'+Dmi+':'+Ds;return newDate;}//只能输⼊数字function txtnumber(){if ((event.keyCode >57) || (event.keyCode <48))return false;else return true;}//只能输⼊数字和字母function txtnumchar(){ //65- 90 97-122var kcode = event.keyCode;if (kcode >= 48 && kcode <= 57)return true;else if(kcode >= 65 && kcode <= 90)return true;else if (kcode >= 97 && kcode <= 122)return true;elsereturn false;}getCommonTable.js复制代码代码如下:getCommonTable.js//获取table头function getTableHeadByWidth(widthSize,ids){var Tableone = "<table id='tab"+ids+"' border='0' cellspacing='0' cellpadding='0' ";var Tabletwo = ">";if (widthSize == "")return Tableone + Tabletwo;elsereturn Tableone+"width="+widthSize+Tabletwo;}//获取第⼀个tr td 传⼀个宽度值function getTrAndTdFirstByCWidth(classname,widthSize){var tdone = " <tr ";var tdtwo = "><td style="BORDER-BOTTOM: 1px solid;" style="BORDER-BOTTOM: 1px solid;" align='center' "; var tdthr = " > ";if (classname =="")tdone += tdtwo;elsetdone+=" class ='"+classname+"' "+tdtwo;if (widthSize == "")tdone += tdthr;elsetdone += " width="+widthSize+tdthr;return tdone;}//获取下⼀个TD,传⼀个宽度值function getTdNextByWidth(widthSize){var tdone = " </td><td style=" BORDER-BOTTOM: 1px solid" style=" BORDER-BOTTOM: 1px solid" align='center' ";var tdtwo =">";if (widthSize =="")return tdone+tdtwo;elsereturn tdone+"width="+widthSize+tdtwo;}//获取最后⼀个tdfunction getTdLastByWidth(widthSize){var tdone = " </td><td style=" BORDER-BOTTOM: 1px solid" style=" BORDER-BOTTOM: 1px solid" align='center' ";var tdtwo =">";if (widthSize =="")return tdone+tdtwo;elsereturn tdone+"width="+widthSize+tdtwo;}//获取最后⼀个tr/tdfunction getTrAndTdLast(){return " </td></tr>";}//获取table尾function getTableLast(){return "</table>";}//获取imgfunction getImgByParams(imgUrl,altstr,eventName,eventParams,imgid){var one = "<img border='0' style="CURSOR: hand" style="CURSOR: hand"";if (imgUrl != "")one += "src='"+imgUrl+"'";if (altstr != "")one += "alt='"+altstr+"'";if(imgid != "")one += "id='"+imgid+"'";one += "onclick='"+eventName+"("+eventParams+");'> ";return one}//--------排序---------------------------//通过字段的内容排序SortByBtnidAndCellName=function(btnId,cellName,celltype){var way = getOpType(btnId);//0为正。
在Thinkphp中使用ajax实现无刷新分页的方法
在Thinkphp中使⽤ajax实现⽆刷新分页的⽅法在Thinkphp⽬录的Lib\ORG\Util\⽬录⾥新建AjaxPage.class.php,写⼊⼀下内容:<?php// +----------------------------------------------------------------------// | ThinkPHP [ WE CAN DO IT JUST THINK IT ]// +----------------------------------------------------------------------// | Copyright (c) 2009 All rights reserved.// +----------------------------------------------------------------------// | Licensed ( /licenses/LICENSE-2.0 )// +----------------------------------------------------------------------// | Author: liu21st <liu21st@>// +----------------------------------------------------------------------// $Id: Page.class.php 2712 2012-02-06 10:12:49Z liu21st $class AjaxPage {// 分页栏每页显⽰的页数public $rollPage = 5;// 页数跳转时要带的参数public $parameter ;// 默认列表每页显⽰⾏数public $listRows = 20;// 起始⾏数public $firstRow ;// 分页总页⾯数protected $totalPages ;// 总⾏数protected $totalRows ;// 当前页数protected $nowPage ;// 分页的栏的总页数protected $coolPages ;// 分页显⽰定制protected $config = array('header'=>'条记录','prev'=>'上⼀页','next'=>'下⼀页','first'=>'第⼀页','last'=>'最后⼀页','theme'=>' %totalRow% %header% %nowPage%/%totalPage% 页 %upPage% %downPage% %first% %prePage% %linkPage% %nextPage% %end% // 默认分页变量名protected $varPage;public function __construct($totalRows,$listRows='',$ajax_func,$parameter='') {$this->totalRows = $totalRows;$this->ajax_func = $ajax_func;$this->parameter = $parameter;$this->varPage = C('VAR_PAGE') ? C('VAR_PAGE') : 'p' ;if(!empty($listRows)) {$this->listRows = intval($listRows);}$this->totalPages = ceil($this->totalRows/$this->listRows); //总页数$this->coolPages = ceil($this->totalPages/$this->rollPage);$this->nowPage = !empty($_GET[$this->varPage])?intval($_GET[$this->varPage]):1;if(!empty($this->totalPages) && $this->nowPage>$this->totalPages) {$this->nowPage = $this->totalPages;}$this->firstRow = $this->listRows*($this->nowPage-1);}public function setConfig($name,$value) {if(isset($this->config[$name])) {$this->config[$name] = $value;}}public function show() {if(0 == $this->totalRows) return '';$p = $this->varPage;$nowCoolPage = ceil($this->nowPage/$this->rollPage);$url = $_SERVER['REQUEST_URI'].(strpos($_SERVER['REQUEST_URI'],'?')?'':"?").$this->parameter;$parse = parse_url($url);if(isset($parse['query'])) {parse_str($parse['query'],$params);unset($params[$p]);$url = $parse['path'].'?'.http_build_query($params);}//上下翻页字符串$upRow = $this->nowPage-1;$downRow = $this->nowPage+1;if ($upRow>0){$upPage="<a id='big' href='javascript:".$this->ajax_func."(".$upRow.")'>".$this->config['prev']."</a>";}else{$upPage="";}if ($downRow <= $this->totalPages){$downPage="<a id='big' href='javascript:".$this->ajax_func."(".$downRow.")'>".$this->config['next']."</a>";}else{$downPage="";}// << < > >>if($nowCoolPage == 1){$theFirst = "";$prePage = "";}else{$preRow = $this->nowPage-$this->rollPage;$prePage = "<a id='big' href='javascript:".$this->ajax_func."(".$preRow.")'>上".$this->rollPage."页</a>";$theFirst = "<a id='big' href='javascript:".$this->ajax_func."(1)' >".$this->config['first']."</a>";}if($nowCoolPage == $this->coolPages){$nextPage = "";$theEnd="";}else{$nextRow = $this->nowPage+$this->rollPage;$theEndRow = $this->totalPages;$nextPage = "<a id='big' href='javascript:".$this->ajax_func."(".$nextRow.")' >下".$this->rollPage."页</a>";$theEnd = "<a id='big' href='javascript:".$this->ajax_func."(".$theEndRow.")' >".$this->config['last']."</a>";}// 1 2 3 4 5$linkPage = "";for($i=1;$i<=$this->rollPage;$i++){$page=($nowCoolPage-1)*$this->rollPage+$i;if($page!=$this->nowPage){if($page<=$this->totalPages){$linkPage .= " <a id='big' href='javascript:".$this->ajax_func."(".$page.")'> ".$page." </a>";}else{break;}}else{if($this->totalPages != 1){$linkPage .= " <span class='current'>".$page."</span>";}}}$pageStr = str_replace(array('%header%','%nowPage%','%totalRow%','%totalPage%','%upPage%','%downPage%','%first%','%prePage%','%linkPage%','%nextPage%','%end%'),array($this->config['header'],$this->nowPage,$this->totalRows,$this->totalPages,$upPage,$downPage,$theFirst,$prePage,$linkPage,$nextPage,$theEnd),$this->config['theme']);return $pageStr;}}>控制器⾥写⼊以下内容:<?phpclass UserAction extends Action{public function user(){import("ORG.Util.AjaxPage");// 导⼊分页类注意导⼊的是⾃⼰写的AjaxPage类$credit = M('user');$count = $credit->count(); //计算记录数$limitRows = 5; // 设置每页记录数$p = new AjaxPage($count, $limitRows,"user"); //第三个参数是你需要调⽤换页的ajax函数名$limit_value = $p->firstRow . "," . $p->listRows;$data = $credit->order('id desc')->limit($limit_value)->select(); // 查询数据$page = $p->show(); // 产⽣分页信息,AJAX的连接在此处⽣成$this->assign('list',$data);$this->assign('page',$page);$this->display();}}>模板⽂件如下:<html><head><title>Ajax⽆刷新分页</title><script type="text/javascript" src="../Public/jquery-1.7.2.min.js"></script><script type="text/javascript">function user(id){ //user函数名⼀定要和action中的第三个参数⼀致上⾯有var id = id;$.get('User/user', {'p':id}, function(data){ //⽤get⽅法发送信息到UserAction中的user⽅法$("#user").replaceWith("<div id='user'>"+data+"</div>"); //user⼀定要和tpl中的⼀致});}</script></head><body><div id='user'> <!--这⾥的user和下⾯js中的test要⼀致--><volist id='list' name='list'> <!--内容输出--><{$list.id}> <{$ername}><br/></volist><{$page}> <!--分页输出--></div></body></html>以上所述是⼩编给⼤家介绍的在Thinkphp中使⽤ajax实现⽆刷新分页的⽅法,希望对⼤家有所帮助,如果⼤家有任何疑问请给我留⾔,⼩编会及时回复⼤家的。
ajax无刷新分页请求的原理
ajax无刷新分页请求的原理Ajax无刷新分页请求的原理在Web开发中,经常会遇到需要分页加载数据的场景,而传统的分页方式是通过刷新整个页面来加载新的数据。
然而,这种方式会导致用户体验较差,页面加载速度慢,因此,Ajax无刷新分页请求成为了一种常见的解决方案。
Ajax是一种能够在不重新加载整个页面的情况下与服务器进行数据交互的技术。
它通过在后台与服务器进行异步通信,实现了在页面不刷新的情况下更新部分内容的效果。
而无刷新分页请求就是利用了Ajax的这个特性,通过局部刷新页面来加载新的数据,从而实现分页的效果。
实现无刷新分页请求的关键在于前端和后端的配合。
首先,前端需要监听用户的操作,当用户点击分页按钮时,前端会发起一个Ajax 请求,向服务器请求新的数据。
这个请求通常会携带一些参数,如当前页码、每页显示的数据条数等。
然后,服务器接收到这个请求后,会根据参数进行相应的处理,从数据库中查询对应的数据,并将数据返回给前端。
前端接收到服务器返回的数据后,会使用JavaScript动态地更新页面的内容,将新的数据展示给用户。
这个过程中,只有部分页面内容会被刷新,而不会影响其他部分的显示。
这样就实现了无刷新的分页效果。
在实现无刷新分页请求时,还需要注意一些细节。
首先,前端需要对用户的操作进行合理的处理,避免用户频繁地点击分页按钮导致多次请求,可以通过设置一个延时器,保证用户在一段时间内只能点击一次分页按钮。
其次,需要给用户提供一些反馈信息,如加载中的动画或提示文字,以便用户知道数据正在加载中。
最后,还要考虑性能优化的问题,如合理地设置缓存、减少请求次数等,以提升用户的体验。
总结起来,Ajax无刷新分页请求通过前端与后端的配合,利用Ajax 技术在不刷新整个页面的情况下加载新的数据,实现了分页的效果。
这种方式可以提升用户的体验,减少不必要的页面刷新,对于数据量较大或需要频繁分页的场景尤为适用。
在实际开发中,我们可以根据具体的需求和技术栈选择合适的方法和工具来实现无刷新分页请求。
基于ajax+php+mysql的无刷新分页工具的研究与实现
//此处包含配置文件,连接服务器,选择数据库。(代码略)
约束结果集中的行数。语法为:
$pageSize=5; // 每页显示的记录行数
limit [offset,]count
$pageCodeNum=6; // 分页导航页码的个数
其中,offset 参数指定要返回的第一行的偏移量。第一行
$sqlQuery="select 字段列表 from 表 ……"; //查询语句,
分页的原理其实很简单,其实质就是按照提供的起始和 的区域,假设是 id 为“result”的 DIV。该区域将填充 AJAX 返
结束位置分批显示数据表记录。因此,用户提交的关键信息 回的信息。该信息是对原有的数据列表和分页导航的重写。
就是当前的页码$pageNow 和每次要显示的记录条数$pageS- 因此,需要将原有的数据列表和页面导航隐藏。
ize。其中,$pageNow 的值就是分页导航中的页码数,它决定
在数据显示页还将调用分页处理函数返回的分页信息,
了在数据表中读取数据的起始位置;而$pageSize 的值就决定 从而显示分页导航。基本结构如下:
了从起始位置向后读取的范围。
<? php
在 MYSQL 中构造 SQL 查询语句时,limit 子句可以用来
与最大导航页码处于同一个页面导航条内。如图 6 中的页码
//显示分页函数 page 返回的分页导航信息(代码略)
“17”。此时:
</div>
前段页码数 $forward = $pageNow - $pageCodeNum
<? php //关闭连接(代码略)?>
当前页码段中的页码就是从 $forward + 1 到 $pageTotal
Ajax写分页查询(实现不刷新页面)
var da = 1;
// 最小页
$.ajax({
async:false,
//
做成同步
url:"zys.php", dataType:"TEXT", success:function(data){
da = data; //最大页数
} });
}
接下来做查询总页数的php页面:
<?php //查询总页数 include ("db.class.php"); $db = new db(); $sql = "select count(*) from min"; $zts = $db->strquery($sql); //总条数 echo ceil($zts/3); //ceil向上取整
可以,没毛病 7.做页数的点击事件,实现点击页数跳转到该页数并显示数据,还要更新列表; 先给数字列表加上一个class
s += " <li class='active list'><a>" + i + "</a></li>"
然后写方法:
//给列表加上点击事件
$(".list").click(function(){
//
alert(da);
if(page<da)
{
//如果不是第一页
page = parseInt(page) + 1;
}
//
page获取了当前页,重新加载以下方法
//调用load方法
load();
//把加载数据封装成一个方法
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能
理由:jquery简单,兼容性好且容易封装。
废话不多说,马上开始我们的Jquery插件编写吧。
应该有很多人写过类似的插件,我也是有些模仿flexGrid的形式。
需求:GridView显示数据,无刷新分页,无刷新排序,无刷新过滤(搜索数据),基于A (我们这里有ashx一般处理文件来实现)。
使用到技术:2.0, jquery,css首先写的是jquery插件方面,使用的核心函数还是jquery的ajax函数,方便快捷。
复制代码代码如下:$.ajax({type: p.method,url: p.url,data:param,success: function(msg){$.AddData(msg,showbox,p);},error: function(msg){$.ErrorAjax(showbox,p.errorMsg);},beforeSend:function(){$.AddLoading(showbox);},complete:function(){$.MoveLoading(showbox);}});看了就这么简单的一句,jquery就是比较爽的。
具体的代码请下载下面的附件查看哦。
先发张生成后结果图来看看(样式不是很好看,需要的自己掂量着修改吧)排序和过滤功能jquery+ashx的无刷新分页功能其实这里除了jquery充当整个插件的主要架构外,另外一个重要的文件就是ashx这个一般处理文件啦。
ashx在我整个jqueryGrid插件中输出{\n page:1,\ntotal:0,pages:1,rows:'',col s:''}这样的json代码,相信用过josn的朋友都明白。
其中为了减少错误我用了一个第三方插件Newtonsoft.Json,这是格式化json字符串的JsonConvert.DeserializeObject()这个函数就是啦。
当然该功能插件之适合用于web应用程序和内部网站中,对于网站来说有些不适合,毕竟从SEO角度来讲jquery直接生成的数据是不是很好的显示方式。
基于JQuery多关键字组合无刷新分页技术的实现
基于JQuery多关键字组合无刷新分页技术的实现作者:孙仁鹏刘富国来源:《软件工程》2017年第08期摘要:有刷新分页需要回传整个页面,用户体验效果差。
原生AJAX实现无刷新分页,难度高,代码复杂,且有浏览器兼容和不便解析JSON数据问题。
为了解决不足,提出使用JQuery实现无刷新分页。
首先分析了有刷新和无刷新的工作原理,然后结合多关键字组合搜索,阐述分页的核心实现思路,同时利用JSON提升网络传输效率和简化数据解析,利用数据库端物理分页提高分页性能。
实践表明,研究具有较好的实用价值。
关键词:JQuery;多关键字;无刷新;物理分页;JSON中图分类号:TP311 文献标识码:AAbstract:With refreshing paging techniques,the entire page needs to be posted back and the user experience is poor.Native AJAX implements non-refreshing paging with many problems,like high difficulty,complexity code,poor browser compatibility and inconvenience for parsing JSON data.In order to solve the problems,the paper proposes to achieve non-refreshing paging through JQuery.The operating principles of refreshing and non-refreshing are analyzed in the first place,and then the core implementation thoughts of paging are explained with the multi-keyword combination search.By adopting JSON,the network transmission efficiency is enhanced and the data analysis is simplified.The paging performance is improved through physical paging on the database.Practice has proved the high practical value of the scheme.Keywords:JQuery;multi-keyword;non-refreshing;physical paging;JSON1 引言(Introduction)数据分页展示,是web编程常用的一项技术。
商品评论无刷新分页”的代码,详细描述功能实现过程;
商品评论无刷新分页”的代码,详细描述功能
实现过程;
商品评论无刷新分页的代码可以通过使用Ajax和服务器端数据处理技术实现。
实现过程如下:
1. 在前端页面HTML中创建一个用于展示评论的容器,例如一个`<div>`元素。
2. 在JavaScript代码中使用Ajax技术向服务器端发送请求,获取评论数据。
可以使用`XMLHttpRequest`对象或者更方便的第三方库(例如jQuery的`$.ajax`)来发送请求。
3. 在服务器端,接收到评论数据请求后,根据需要的页码和每页展示的评论数量,从数据库或其他数据源中获取相应的评论数据。
4. 将获取到的评论数据转换为JSON格式,并发送回前端页面。
5. 在前端页面的JavaScript代码中,接收到服务端返回的评论数据后,解析JSON数据,并将评论内容渲染到评论容器中。
6. 在前端页面上添加页面导航元素,例如一个包含页码数字的HTML元素或一个包含“上一页”和“下一页”按钮的HTML元素。
7. 为页面导航元素绑定事件监听器。
当用户点击或触发相关导航元素时,通过Ajax向服务器端发送请求,请求指定页码和每页评论数量的评论数据。
8. 服务器端接收到分页请求后,执行步骤3中的逻辑,返回对应页码的评论数据给前端。
9. 前端接收到服务端返回的评论数据后,执行步骤5中的逻辑,更新评论容器中的评论内容。
通过以上步骤的实现,即可实现商品评论的无刷新分页功能。
用户在浏览评论时,可以方便地切换到不同的评论页码,同时页面的刷新和加载时间也得到了优化。
php+ajax+jquery分页并显示数据
php+ajax+jquery分页并显⽰数据参考https:///view-blog-195.htmlhtml页⾯1 <div class="weui-cells" id="more">2 <!-- 把class="sin"的页⾯数据追加append到id=“more”⾥⾯ -->3 </div>4 <div>5 <button></button>6 </div>上⾯的第⼀个div是显⽰帖⼦列表的地⽅,包括帖⼦的标题,作者昵称。
第⼆个div是个按钮,显⽰下⼀页。
jquery我们先声明变量,后⾯的代码要⽤到以下变量。
var curPage = 1; //当前页码var total,pageSize,totalPage;接下来,我们⾃定义⼀个函数:getData(),⽤来获取当前页数据。
函数中,我们利⽤$.ajax()向后台list_1test.php发送POST异步请求,将当前页码以JSON格式传递给后台。
1 function getData(page){2 $.ajax({3 type: "post",4 url: "list_1test.php",5 dataType:"json",6 data: {'pageNum':page-1},7 success: function(data) {8 console.log(data);9 total = data.num; //总记录数10 pageSize = data.fnum; //每页显⽰条数11 curPage = page; //当前页12 totalPage = data.$pagenum; //总页数13var html = '';//定义html变量,他就是每次要加的代码14for (var i = 0; i < data.length; i++) {//在php后台我定义的每页有5条帖⼦,data.length=515 html += '<div class="sin">' +16'<a class="weui-cell weui-cell_access" href="aritle.php?id='+data[i]['postid']+'">' +17//'<div class="postid">' +data[i]['postid']+ '</div>' +18'<div class="weui-cell__bd">' +19'<p class="title">' + data[i]['title'] + '</p>' +20'</div>' +21'<div class="weui-cell__ft">' +22'<div class="nickname">'+data[i]['nickname']+'</div>' +23'</div>' +24'</a>' +25'</div>';26 }27 $('#more').append(html);//追加2829 },30 complete:function(){ //点击得到下⼀页31 getPageBar();32 },33 });34 }主要是获取下⼀页,rel的值1 function getPageBar(){2 pageStr = "";3 pageStr += "<span><a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>点击加载更多</a>";4 $("button").html(pageStr);5 }当页⾯第⼀次加载时,我们加载第⼀页数据即getData(1),当点击分页条中的下⼀页按钮时,调⽤getData(page)加载对应页码的数据。
【PHP代码】php+ajax实现分页效果
【PHP代码】php+ajax实现分页效果ajax可以实现无刷新提交,当然也可以实现无刷新分页,这对于用户体验来说是很不错,好了,废话不说,看代码。
ajaxpage.php【这里是数据展示页面的代码】:<meta charset=’utf-8′><script src=”/ajax/libs/jquery/1.4/jquery.min.js”type=”text/javascript”/></script><script type=”text/javascript”>//获取当前url地址,主要是获取page参数,为了不实现跳转在分页中采用了锚点连接的方式var url=location.href;uarr=url.indexOf(‘#’);npage=url.substr(uarr+6);if(!npage)npage=1;jQuery(function(){$.ajax({type: “POST”,url: “ajax.php”,dataType:’json’,//由于ajax返回值是数组,所以在php脚本中经过json编码data: “page=”+npage,success: function(msg){$(‘#post_result’).html(msg.page_content);$(‘#navipage’).html(msg.page_list);}});})function url_go(page){$.ajax({type: “POST”,url: “ajax.php”,dataType:’json’,data: “page=”+page,success: function(msg){$(‘#post_result’).html(msg.page_content);$(‘#navipage’).html(msg.page_list);}});}</script><div id=post_result></div><div id=navipage></div>————————————————————-ajax.php【这里是生成数据和分页的代码】:<?php$host=”localhost”;$user=”root”;$pwd=”root”;$dbname=”test”;$link = mysql_connect($host, $user, $pwd)or die(“Could not connect: ”. mysql_error()); mysql_select_db($dbname, $link) or die (‘Can\’t use test : ‘. mysql_error());mysql_query(“SET NAMES ‘utf8′”);mysql_query(“SET CHARACTER_SET_CLIENT=utf8″);mysql_query(“SET CHARACTER_SET_RESULTS=utf8″);//分页设置$page=$_REQUEST['page']?$_REQUEST['page']:1;//设置每页显示多好条记录$page_size=2;//设置limit偏量$off=($page-1)*$page_size;//获取总记录数$sql_all=”select * from user order by id desc”;$all_res=mysql_query($sql_all);$total_all=mysql_num_rows($all_res);//计算页面总数,注意键名,当然你也可以使用数字下标$page_num=ceil($total_all/$page_size);//读取当前页记录数$sql_page=”select * from user order by id desc limit $off,$page_size”;$page_res=mysql_query($sql_page);while ($arr=mysql_fetch_array($page_res)){$ajax_arr['page_content'].=’id:’.$arr['id'].’<br>user:’.$arr['user'].’<br><hr>’;}for($i=1;$i<=$page_num;$i++){if($i==$page){$ajax_arr['page_list'].=’<a href=?#page=’.$i.’onclick=”url_go(‘.$i.’)”>[<font color=red>'.$i.'</font>]</a>’;}else{$ajax_arr['page_list'].=’<a href=?#page=’.$i.’onclick=”url_go(‘.$i.’)”>['.$i.']</a>’;}}//对数组进行json编码,否则ajax无法获取数组形式的返回值echo json_encode($ajax_arr);?>——————————————————这里是sql文件用来生成测试数据:–phpMyAdmin SQL Dump–version 3.3.9.2–––主机: localhost–生成日期: 2002 年01 月01 日04:57–服务器版本: 5.5.9–PHP 版本: 5.3.5SET SQL_MODE=”NO_AUTO_V ALUE_ON_ZERO”;/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8 */;––数据库: `test`––——————————————————–––表的结构`user`–CREATE TABLE IF NOT EXISTS `user` (`id` int(10) unsigned NOT NULL AUTO_INCREMENT,`user` varchar(6) NOT NULL,`pwd` varchar(30) NOT NULL,PRIMARY KEY (`id`)) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=19 ;––转存表中的数据`user`–INSERT INTO `user` (`id`, `user`, `pwd`) V ALUES(11, ‘测试2′, ‘测试2′),(12, ‘测试1′, ‘测试1′),(13, ‘测试3′, ‘测试3′),(15, ‘测试4′, ‘测试4′),(16, ‘测试5′, ‘测试5′),(17, ’222′, ’111′), (18, ’222a’, ’111a’);。
使用PHP+JQuery+Ajax分页的实现
"&action=list_by_initial"+
//获取用户点击的页码(除去点击 more 按钮) $("#searchWordsByInitial_Pager button.not_more_btn").live("click", function(event){ // 清除所有页码的 active class ,并且设置点击的页码为 active ;这里不要使 用 .attr 和 .removeAttr; $("#searchWordsByInitial_Pager button").removeClass("active"); $(this).addClass("active"); //获取当前点击的页码 page_initial=$(this).html(); //将要传送的参数拼串 &action=list_by_initial&initial=O&page_initial=3 btnData = "&action=list_by_initial"+ "&initial="+initial_value+"&page="+page_initial; $.ajax({ type: "POST", url: processFile, data: btnData, success: function(data) { $("#word_list_by_initials").hide(); $("#word_table_by_initials").html(""); $("#word_table_by_initials").html(data); init_searchWordsByInitial_Pager();
asp.net使用AJAX实现无刷新分页
查询功能是开发中最重要的一个功能,大量数据的显示,我们用的最多的就是分页。
在 中有很多数据展现的控件,比如Repeater、GridView,用的最多的GridView,它同时也自带了分页的功能。
但是我们知道用GridView来显示数据,如果没有禁用ViewState,页面的大小会是非常的大的。
而且平时我们点击首页,下一页,上一页,尾页这些功能都是会引起页面回发的,也就是需要完全跟服务器进行交互,来回响应的时间,传输的数据量都是很大的。
AJAX的分页可以很好的解决这些问题。
数据显示Pasing.aspx页面JS代码:代码如下:<script type=text/javascript>var pageIndex = 0;var pageSize = 5;window.onload = AjaxGetData(name,0,5);function AjaxGetData(name, index, size){$.ajax({url: jQueryPaging.aspx,type: Get,data: Name= + name + &PageIndex= + index + &PageSize= + size,dataType: json,success: function (data) {var htmlStr = ;htmlStr +=htmlStr +=htmlStr +=htmlStr += ;htmlStr += //data.cloudfileLists.lengthfor (var i = 0; i < data.cloudfileLists.length; i++){htmlStr += ;htmlStr +=+htmlStr += ;}htmlStr += ;htmlStr += ;htmlStr += ;htmlStr += ;htmlStr += ;htmlStr += ;htmlStr += <table><thead><tr><td>编号</td><td>文件名</td></tr></thead><tbody><tr><td> + data.cloudfileLists[i].FileID + </td><td> + data.cloudfileLists[i].FileName +</td></tr></tbody><tfoot><tr><td colspan="'6'">;htmlStr += <span>共有记录+ data.Count + ;共<span id="'count'"> + (data.Count % 5 == 0 ? parseInt(data.Count / 5) : parseInt(data.Count / 5 + 1)) + </span>页+ </span>;htmlStr += 首页;htmlStr += 前一页;htmlStr += 后一页;htmlStr += 尾页;htmlStr += <input type="'text'"><input type="'button'" value="'跳转'" onclick="'GoToAppointPage(this)'"> ;htmlStr += </td></tr></tfoot></table>;$(#divSearchResult).html(htmlStr);//重写html},error: function (XMLHttpRequest, textStatus, errorThrown) {alert(XMLHttpRequest);alert(textStatus);alert(errorThrown);}});}//首页function GoToFirstPage() {pageIndex = 0;AjaxGetData($(#txtSearch).val(), pageIndex, pageSize);}//前一页function GoToPrePage() {pageIndex -= 1;pageIndex = pageIndex >= 0 ? pageIndex : 0;AjaxGetData($(#txtSearch).val(), pageIndex, pageSize);}//后一页function GoToNextPage() {if (pageIndex + 1 < parseInt($(#count).text())) {pageIndex += 1;}AjaxGetData($(#txtSearch).val(), pageIndex, pageSize);}//尾页function GoToEndPage() {pageIndex = parseInt($(#count).text()) - 1;AjaxGetData($(#txtSearch).val(), pageIndex, pageSize);}//跳转function GoToAppointPage(e) {var page = $(e).prev().val();if (isNaN(page)) {alert(请输入数字!);}else {var tempPageIndex = pageIndex;pageIndex = parseInt($(e).prev().val()) - 1;if (pageIndex < 0 || pageIndex >= parseInt($(#count).text())) {pageIndex = tempPageIndex;alert(请输入有效的页面范围!);}else {AjaxGetData($(#txtSearch).val(), pageIndex, pageSize);}}}</script>同一页面HTML代码:jQueryPaging.aspx页面的CS代码如下:引用这个命名空间:using System.Web.Script.Serialization;//JavaScriptSerializer要用的。
PHP+Ajax无刷新带分页新闻评论系统
Ajax新闻评论系统,带分页。
昨天在网上找了半天发现没什么好用的,于是干脆自己动手写了一个,希望对大家有所帮助。
测试环境:IIS5.1 + PHP5.2.12 + MySQL5.0.88程序说明:本系统只是实现了基本的功能,其他的诸如数据过滤、数据编码和解码,后台审核功能等,根据需要加上就行了。
为了测试方便,本程序没有对验证码进行判断。
特别提醒:本程序使用的是PDO,所以php.ini中的extension=php_pdo.dll和extension=php_pdo_mysql.dll必须打开。
如果出现问题,请仔细检查各个页面的路径是否正确。
另外某些字符会影响程序的执行,所以在使用的时候最好对数据进行编码。
新闻页面:index.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><title>无标题文档</title><style type="text/css">body{font-family:"Times New Roman","宋体",Arial;font-size:14px;color:#333;}.plunshow{font-size:14px;color:#333;margin:10px;}.plunpage{font-size:12px;color:#333;margin:10px;}</style><script language = "javascript" src ="ajax_navagation.js"></script><script language = "javascript" src ="plun_zhfl.js"></script></head><body><table width="90%" border="0" cellpadding="0" cellspacing="0"><tr><td height="80" align="center">新闻正文</td></tr><tr><td align="left"> </td></tr><tr><td align="center" height="30"><div id="plunbox"></div><script language="javascript">var newsid = 106; //新闻IDvar clname = '科技'; //新闻分类open_url("plun_box.php","plunbox");getplun(1); //因为要分页,所以加了一个参数表示第几页</script></td></tr></table></body></html>js文件:ajax_navagation.js/*Design By Xinge At 2007-05-22Demo:/test/ajax2/test.htm*/var please_wait = null;function open_url(url, target) {var link;if (!document.getElementById) return false;if (please_wait != null) document.getElementById(target).innerHTML = please_wait;if (window.ActiveXObject) {try{link = new ActiveXObject("Msxml2.XMLHTTP");}catch(e){link = new ActiveXObject("Microsoft.XMLHTTP");}} else if (window.XMLHttpRequest) link = new XMLHttpRequest();if (link == undefined) return false;link.onreadystatechange = function() { response(link, url, target); }link.open("GET", url, true);link.send(null);}function response(link, url, target) {//alert(link.readyState + ' -- ' + target);//alert(link.readyState);if (link.readyState < 4) {document.getElementById(target).innerHTML = "<img src='../images/loading.gif' alt='loading...'><span style='padding-left:5px; font-size: 14px; color:#FF9900';>载入中,请稍后...</span>";} else {//document.getElementById(target).innerHTML = (link.status == 200) ? link.responseText : "Ooops!! A broken link! Please contact the webmaster of this website and give him the fallowing errorcode: " + link.status;document.getElementById(target).innerHTML = (link.status == 200) ? link.responseText : "Ooops!! A broken link!";}}function set_loading_message(msg) {please_wait = msg;}plun_zhfl.js//*************************************************function addplun(){document.getElementById("plunact").disabled = true;var actdelay = "document.getElementById('plunact').disabled = false";setTimeout(actdelay,15000);var username = document.getElementById("username").value;var userface = document.getElementById("userface").value;var pluncont = document.getElementById("pluncont").value;var verifcode = document.getElementById("verifcode").value;if (username=="") {alert("用户名不能为空!");window.history.back();} else if (pluncont.length<=2 || pluncont.length>300) {alert("字数应为5-300个!");window.history.back();} else {open_url("plun_zhfl.php?act=add&newsid="+newsid+"&clname="+clname+"&verifcode=" +verifcode+"&username="+username+"&userface="+userface+"&pluncont="+convtobr(pluncont ),null);}getplun(1);}//*************************************************function getplun(page){open_url("plun_zhfl.php?act=get&newsid="+newsid+"&clname="+clname+"&page="+page ,"plunshow");}//*************************************************function convtobr(ss){var r, re;re = /\r/g;r = ss.replace(re, "<br />");re = /\n/g;r = ss.replace(re, "<br />");return(r);}//*************************************************function showface(){if(document.getElementById("facebox").style.display=="none"){document.getElementById("facebox").style.display = "block";} else {document.getElementById("facebox").style.display = "none";}}//*************************************************function chosface(face){document.getElementById("facepic").src = "plunface/"+face;document.getElementById("userface").value = face;showface();}评论显示页:plun_box.php把这个单独放到一个文件中,主要是为了便于修改,如果新闻页面数量很多的话。
php+ajax实现无刷新数据分页例子
php+ajax实现无刷新数据分页例子php+ajax实现无刷新数据分页例子无刷新功能我们用到很多很多的,下面我就来给各位介绍一个实例,就是实现php+ajax实现无刷新数据分页了,例子非常的简单大家只要按流程来操作就可以了哦.index.php 文件代码如下:<?phpheader("Content-type: text/html;charset=GBK");//输出编码,避免中文乱码><html><head><title>ajax分页演示</title><script language="javascript" src="ajaxpg.js"></script><link rel="stylesheet" type="text/css" href="page.css"></head><body><div id="result"><?php$page=isset($_GET['page'])?intval($_GET['page']):1; //这句就是获取page=18中的page的值,假如不存在page,那么页数就是1。
$num=3; //每页显示10条数据$db=mysql_connect("localhost","root","123456"); //创建数据库连接mysql_select_db("demo",$db) or die("数据库链接错误"); //选择要操作的数据库mysql_query("set names gbk");/*首先咱们要获取数据库中到底有多少数据,才能判断具体要分多少页,具体的公式就是总数据库除以每页显示的条数,有余进一。
JQueryAjax实现翻页无刷新
JQueryAjax实现翻页⽆刷新为了提⾼⽹站的⽤户体验,最近在⽹上找了⼀些资料,做了⼀个Ajax实现的⽆刷新的翻页,在此跟⼤家⼀起共享⼀下,有不⾜之处还望⼤家多多指教!⼀下分四个点给⼤家讲解。
1.在页⾯中导⼊JQuery的jquery-1.3.2.min.js⽂件。
2.页⾯代码代码1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TurnPage.aspx.cs" Inherits="WebApplication1.ShowInfoList" %>23 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">4 <html xmlns="/1999/xhtml">5 <head runat="server">6 <title>显⽰列表</title>7 <link type="text/css" href="css/pagination.css" />8 <script type="text/javascript" src="jquery-1.3.2.min.js"></script>9 <script type="text/javascript" src="showdata.js"></script>10 </head>11 <body>12 <form id="form1" runat="server">13 <div>14 <asp:Literal ID="ltr_show" runat="server">15 <table style="width:400px;" id="tbshow">16 <tr><td>标题</td><td>版本</td><td>时间</td></tr></table>17 </asp:Literal>18 <br />19 <a id="uppage" href="#">上⼀页</a> <a id="downpage" href="#">下⼀页</a>20 </div>21 </form>22 </body>23 </html>24253.编写⼀个js⽂件showdata.js,当然也可以将它⾥⾯的js直接写在页⾯上js代码如下:代码1 $().ready(function(){2var indexs=1;3 Init(indexs);4 $("#uppage").click(function(){if(indexs>1){indexs--}Init(indexs);});5 $("#downpage").click(function(){indexs++;Init(indexs);});6 });7function Init(ind)8 {9 $.ajax({10 type: "GET",11 dataType:"json",12 url:"JsonGetDataList.aspx",//⽬标地址(页⾯代码会在下⾯呈上)13data:"pageindex="+ind,14 success:function(json){15var result = json.ShowData;16var tbody="";17 $("#tbshow tr:gt(0)").remove();18 $.each(result, function(i, n){19var tr="<tr><td>"+n.Title+"</td><td>"+n.Version+"</td><td>"+n.AddTime+"</td></tr>";20 tbody+=tr;21 });22 $("#tbshow tr:gt(0):odd").attr("class","odd");23 $("#tbshow tr:gt(0):even").attr("class","even");24 $("#tbshow").append(tbody);25 }});26 }27284. JsonGetDataList.aspx.cs⽂件代码如下:(JsonGetDataList.aspx页⾯⽆代码,只需有⼀个<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JsonGetDataList.aspx.cs" Inherits="WebApplication1.JsonGetDataList" %> 就⾏了)代码1using System;2using System.Collections;3using System.Configuration;4using System.Data;5using System.Linq;6using System.Web;7using System.Web.Security;8using System.Web.UI;9using System.Web.UI.HtmlControls;10using System.Web.UI.WebControls;11using System.Web.UI.WebControls.WebParts;12using System.Xml.Linq;13using System.Data.SqlClient;14using System.Text;15using System.IO;16using Newtonsoft.Json;17using System.Data.OleDb;1819namespace WebApplication120 {21public partial class JsonGetDataList : System.Web.UI.Page22 {23private string constr = System.Web.Configuration.WebConfigurationManager.ConnectionStrings["myConn"].ToString();//数据库连接字符串24protected void Page_Load(object sender, EventArgs e)25 {26 ShowData();27 }28private void ShowData()29 {30//去掉页⾯缓存31 Page.Response.Buffer = true;32 Page.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);33 Page.Response.AddHeader("pragma", "no-cache");34 Page.Response.AddHeader("cache-control", "");35 Page.Response.CacheControl = "no-cache";36 Response.ContentType = "text/plain";37int pageindex =string.IsNullOrEmpty(Request.QueryString["pageindex"])?1:Convert.ToInt32(Request.QueryString["pageindex"]);38 DataSet ds = GetList(pageindex);39string jsonData = DataTableToJSON(ds.Tables[0], "ShowData");40//输⼊json格式数据41 Response.Write(jsonData);42 }43///<summary>44///分页获取数据列表45///</summary>46private DataSet GetList(int pageindex)47 {48//创建数据库连接池49 OleDbConnection co = new OleDbConnection(constr);50//打开连接池51 co.Open();52 OleDbCommand commands;53 commands = new OleDbCommand("select count(*) from teachermaterial", co);54//数据总记录数55int totalcounts = Convert.ToInt32(commands.ExecuteScalar());56//⾃定义每页⼤⼩为5条数据57int pagesize=5;58//总记录数59int totalpages;60if (totalcounts % pagesize > 0)61 totalpages = totalcounts / pagesize + 1;62else63 totalpages = totalcounts / pagesize;64if (pageindex > totalpages)65 pageindex = totalpages;66 DataSet ds = new DataSet();67 commands = new OleDbCommand("select top 5 * from teachermaterial where id not in (select top (5*(" + pageindex + "-1)) id from teachermaterial)", co);68 OleDbDataAdapter adapter = new OleDbDataAdapter(commands);69 adapter.Fill(ds, "ds");70 co.Dispose();71return ds;72 }73///<summary>74///数据表转换成JSON字符75///</summary>76///<param name="dt">数据表对象</param>77///<param name="dtName">数据表名称</param>78public static string DataTableToJSON(DataTable dt, string dtName)79 {80 StringBuilder sb = new StringBuilder();81 StringWriter sw = new StringWriter(sb);8283using (JsonWriter jw = new JsonTextWriter(sw))84 {85 JsonSerializer ser = new JsonSerializer();86 jw.WriteStartObject();87 jw.WritePropertyName(dtName);88 jw.WriteStartArray();8990if (dt != null)91 {92foreach (DataRow dr in dt.Rows)93 {94 jw.WriteStartObject();9596foreach (DataColumn dc in dt.Columns)97 {98 jw.WritePropertyName(dc.ColumnName);99 ser.Serialize(jw, dr[dc].ToString());100 }101102 jw.WriteEndObject();103 }104 }105106 jw.WriteEndArray();107 jw.WriteEndObject();108109 sw.Close();110 jw.Close();111112 }113114return sb.ToString();115 }116 }117 }1181191201215.看效果了, o(∩_∩)o 哈哈,⼤功告成。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
PHP Ajax jQuery 无刷新分页
冰浪辅助:
demo.php文件
<?php
header("Content-type: text/html;charset=gbk");//输出编码,避免中文乱码
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd">
<html>
<head>
<title>ajax分页演示</title>
<script language="JavaScript" src="ajaxpg.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head>
<body>
<div id="result" style="border-style:dotted; border-color:#F00;">
<?php
$page=isset($_GET['page'])?intval($_GET['page']):1; //这句就是获取page=18中的page的值,假如不存在page,那么页数就是1。
$num=10; //每页显示10条数据
$db=mysql_connect("localhost","root",""); //创建[url=javascript:;]数据库[/url]连接mysql_select_db("data"); //选择要操作的数据库
/*
首先咱们要获取数据库中到底有多少数据,才能判断具体要分多少页,具体的公式就是
总数据库除以每页显示的条数,有余进一。
也就是说10/3=3.3333=4 有余数就要进一。
*/
$result=mysql_query("select * from news");
$total=mysql_num_rows($result); //查询所有的数据
$url='http://localhost/test/phpajax/test.php';//获取本页URL
//页码计算
$pagenum=ceil($total/$num); //获得总页数,也是最后一页
$page=min($pagenum,$page);//获得首页
$prepg=$page-1;//上一页
$nextpg=($page==$pagenum ? 0 : $page+1);//下一页
$offset=($page-1)*$num; //获取limit的第一个参数的值,假如第一页则为(1-1)*10=0,第二页为(2-1)*10=10。
//开始分页导航条代码:
$pagenav="显示第<B>".($total?($offset+1):0)."</B>-<B>".min($offset+10,$total)."</B> 条记录,共$total 条记录";
//如果只有一页则跳出函数:
if($pagenum<=1) return false;
$pagenav.=" <a href=javascript:dopage('result','$url?page=1');>首页</a> ";
if($prepg) $pagenav.=" <a href=javascript:dopage('result','$url?page=$prepg');>前页</a> "; else $pagenav.=" 前页";
if($nextpg) $pagenav.=" <a href=javascript:dopage('result','$url?page=$nextpg');>后页</a> "; else $pagenav.=" 后页";
$pagenav.=" <a href=javascript:dopage('result','$url?page=$pagenum');>尾页</a> "; $pagenav.="共$pagenum 页";
//假如传入的页数参数大于总页数,则显示错误信息
If($page>$pagenum){
Echo "Error : Can Not Found The page ".$page;
Exit;
}
$info=mysql_query("select * from news limit $offset,$num"); //获取相应页数所需要显示的数据
While($it=mysql_fetch_array($info)){
echo $it['id']."<br />";
} //显示数据echo"<br>";
echo $pagenav;//输出分页导航
?>
</div>
</body>
</html>
ajaxpg.js文件
var http_request=false;
function send_request(url){//初始化,指定处理函数,发送请求的函数
http_request=false;
//开始初始化XMLHttpRequest对象
if(window.XMLHttpRequest){//Mozilla浏览器
http_request=new XMLHttpRequest();
if(http_request.overrideMimeType){//设置MIME类别
http_request.overrideMimeType("text/xml");
}
else if(window.ActiveXObject){//IE浏览器
try{
http_request=new ActiveXObject("Msxml2.XMLHttp");
}catch(e){
try{
http_request=new ActiveXobject("Microsoft.XMLHttp");
}catch(e){}
}
}
if(!http_request){//异常,创建[url=javascript:;]对象[/url]实例失败window.alert("创建XMLHttp对象失败!");
return false;
}
http_request.onreadystatechange=processrequest;
//确定发送请求方式,URL,及是否同步执行下段代码
http_request.open("GET",url,true);
http_request.send(null);
}
//处理返回信息的函数
function processrequest(){
if(http_request.readyState==4){//判断对象状态
if(http_request.status==200){//信息已成功返回,开始处理信息document.getElementById(reobj).innerHTML=http_request.responseText; }
else{//页面不正常
alert("您所请求的页面不正常!");
}
}
}
function dopage(obj,url){
document.getElementById(obj).innerHTML="正在读取数据...";
send_request(url);
reobj=obj;
}。