高度なページングチュートリアル: JQUERY と組み合わせて AJAX ページングを実行する-PHPチュートリアル-php.cn

高度なページングチュートリアル: JQUERY と組み合わせて AJAX ページングを実行する

WBOY

リリース： 2016-06-13 11:57:36

オリジナル

900 人が閲覧しました

[オリジナル] 高度なページングチュートリアル: JQUERY を組み合わせて AJAX ページングを行う
この記事では主に JQUERY を組み合わせてリフレッシュ不要のページングを行います。コードは基本的に前の 2 つの記事と同じですが、若干の変更があります。この記事のページ送りリンクは 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 />

ログイン後にコピー

-----解決策--------------------
ページネーションのリンクとコンテンツをテンプレートに作成し、リクエストするたびにテンプレート全体をロードするだけです。
------解決策--------------------------------
一部を削減するjs 操作
- -----解決策---------
学習しました…………