Home > Article > Backend Development > 分页高级教程：结合JQUERY做AJAX分页
分页高级教程：结合JQUERY做AJAX分页
- WBOYOriginal
- 2016-06-13 11:57:36863browse
【原创】分页高级教程：结合JQUERY做AJAX分页
本文主要结合JQUERY做无刷新分页。代码基本上和前两篇文章差不多，稍稍有所变动。本文中的翻页链接用JS编写。先上代码：
page4.php
<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><title>结合jquery做ajax分页</title><br /><style><br />body{ font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif}<br />.page A{ padding:3px 5px; float:left; border:solid #CCCCCC 1px; text-decoration:none; font-size:12px; margin-left:1px; font-family:Verdana;color:#000000;}<br />.page A.currentpage{ color:#FF0000; border: solid red 1px;}<br />.page A:hover{ background-color:#CCCCCC;}<br /></style><br /><script language="javascript" src="jquery-1.7.1.min.js"></script><br /></head><br /><br /><body><?<br /> <br />//PHP分页实例<br /><br /><br />//分页尺寸<br />$page_size=10;<br /><br />$conn=mysql_connect("localhost","root","root") or die(mysql_error());<br />mysql_select_db("xinyang");<br /><br />//计算总行数<br />$total_records=mysql_num_rows(mysql_query("SELECT id from product"));<br /><br />//总页数<br />$total_page=ceil($total_records/$page_size);<br /> <br />$query=mysql_query("select * from product limit 0,$page_size") or die(mysql_error());<br />?><br /><div class="recordlist"><br /><ul><br /><?<br />while ($rs=mysql_fetch_array($query))<br />{<br />?><br /> <li><?=$rs["id"]?>-<?=$rs["ename"]?></li><br /><br /><?<br />}<br />?><br /></ul><br /></div><br /><div class='page'></div><br /><br /><br /></body><br /></html><br /><script language="javascript"><br />var total_page=<?=$total_page?>;<br />var url="page5.php?page";//当前链接,格式如下，例如：?aa=1&page ,somepage.php?action=1&cat=1&page<br /><br />$().ready(function(){<br /><br /> $(".page").html(pagination(1))<br /> <br /> page_link();<br />})<br /><br /><br /><br />function page_link()<br />{<br /> $(".page A").click(function(){<br /> var page=parseInt($(this).attr("page"))<br /> <br /> $(".recordlist").load($(this).attr("href"),"",function(){$(".page").html(pagination(page));page_link();})<br /> return false;<br /> })<br />}<br /><br />function pagination(current_page)<br />{<br /> <br /> //翻页链接开始<br /> current_page = current_page<=0 ? 1 : current_page;<br /> current_page = current_page>total_page?total_page:current_page;<br /> var page_link="";<br /> if (total_page>1)<br /> {<br /> page_link="<a>一共"+total_page+"页</a>";<br /> page_link+="<a>当前第"+current_page+"页</a>";<br /> page_link+="<a href="+url+"=1 page=1>首页</a>";<br /><br /> if (current_page>1){<br /> //页码大于1的时候，显示上一页翻页链接<br /> var pre_page=current_page-1;<br /> page_link+="<a href='"+url+"="+pre_page+"' page="+pre_page+"><<</a>";<br /> }<br /> //翻页列表<br /><br /> //步进分页，翻页列表的数字始终只显示9个或者自定义的个数,本例定义只显示9个,当前页左右各显示4个页码<br /> if (total_page>9)<br /> {<br /> if (current_page>4)<br /> {<br /> var from=current_page-4;<br /> var to=current_page+4;<br /> if (to>total_page)<br /> {<br /> var from=total_page-8;<br /> var to=total_page;<br /> }<br /> <br /> }<br /> else<br /> {<br /> var from=1;<br /> var to=9;<br /> }<br /><br /> }<br /> else<br /> {<br /> var from=1;<br /> var to=total_page;<br /> }<br /> for (var i=from;i<=to;i++)<br /> {<br /> if (i==current_page)<br /> {<br /> //高亮当前页页码<br /> page_link+="<a href='"+url+"="+i+"' class='currentpage' page="+i+">"+i+"</a>";<br /> }<br /> else<br /> {<br /> page_link+="<a href='"+url+"="+i+"' page="+i+" page="+i+">"+i+"</a>";<br /> }<br /><br /> }<br /> //页码小于总页数的时候显示下一页翻页链接<br /> var next_page=current_page+1;<br /> if(next_page<total_page)<br /> {<br /> page_link+="<a href='"+url+"="+next_page+"' page="+next_page+">>></a>";<br /> }<br /> page_link+="<a href='"+url+"="+total_page+"' page="+total_page+">最后一页</a>";<br /> }<br /> return page_link;<br />}<br /><br /></script><br /><br />page5.php
<br /><?<br /> <br />$page=$_GET["page"]+0;<br />$page= $page<=0 ? 1 : $page; <br /><br />//分页尺寸<br />$page_size=10;<br />$conn=mysql_connect("localhost","root","root") or die(mysql_error());<br />mysql_select_db("xinyang");<br />$offset=($page-1)*$page_size;<br />$query=mysql_query("select * from product limit $offset,$page_size") or die(mysql_error());<br />?><br /> <br /><ul><br /><?<br />while ($rs=mysql_fetch_array($query))<br />{<br />?><br /> <li><?=$rs["id"]?>-<?=$rs["ename"]?></li><br /><br /><?<br />}<br />?><br /></ul><br />------解决方案--------------------
你将分页链接和内容做成一个模板 每次请求的时候把整个模板load这个模板就行
------解决方案--------------------
减少一些js操作
------解决方案--------------------
学习了…………
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：php使用fsockopen时,fwrite中的rn及n结束符导致,smtp.qq.com响应出现有关问题Next article：THINKPHP sql查询的有关问题