PHP jquery implements news tag classification and no refreshing pagination
- 2020-03-31 20:04:57
- OfStack
Now jquery is more and more widely used, in many websites in the news section have achieved the tag classification + no refresh pagination effect.
I also tried to write one by myself. The effect diagram is as follows (the style can be adjusted according to the user's requirements) :
It contains 3 JS script files and 2 style sheets:
Jquery - 1.3.2. Min. Js
Jquery. Pager. Js
Jquery UI - 1.7.2. Custom. Min. Js
Jquery UI - 1.7.2. Custom. CSS
Page face ajax4. PHP, ajax5. PHP, ajax6. PHP three page getJson request,
The code of these three pages is almost the same, just a classification of years, I did not do code optimization here,
In fact, it can be completely processed in the same page, the request address with a parameter on the line.
The code of ajax.php is as follows:
(link: http://xiazai.jb51.net/200912/yuanma/jquery_all.rar)
I also tried to write one by myself. The effect diagram is as follows (the style can be adjusted according to the user's requirements) :
< img Alt = "" border = 0 height = 435 SRC =" http://files.jb51.net/upload/2009-12/20091218021217286.jpg "width = 522 >
Next, the implementation process is described in detail:
I've always been a bit of a show-and-tell solution, but I need to use three things here -- the TAB effects plug-in and the pagination plug-in, and jquery's getJson request.
Therefore, I used jquery-ui plug-in and jquery-page plug-in. Now I provide the download address:
It contains 3 JS script files and 2 style sheets:
Jquery - 1.3.2. Min. Js
Jquery. Pager. Js
Jquery UI - 1.7.2. Custom. Min. Js
Jquery UI - 1.7.2. Custom. CSS
Page. The CSS
The code of the HTML page is as follows:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>php + jquery ui + jquery pager</title>
<link type="text/css" href="/css/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<link rel="stylesheet" href="/css/page.css" type="text/css" />
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.7.2.custom.min.js"></script>
<script src="/js/jquery.pager.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('#tabs').tabs();
$.getJSON("ajax4.php",{ pager: 1, count: 10 },function(json){
$("#content1").html(json[1]);
$("#pager1").pager({ pagenumber: 1, pagecount: json[0], buttonClickCallback: PageClick1 });
});
$.getJSON("ajax5.php",{ pager: 1, count: 10 },function(json){
$("#content2").html(json[1]);
$("#pager2").pager({ pagenumber: 1, pagecount: json[0], buttonClickCallback: PageClick2 });
});
$.getJSON("ajax6.php",{ pager: 1, count: 10 },function(json){
$("#content3").html(json[1]);
$("#pager3").pager({ pagenumber: 1, pagecount: json[0], buttonClickCallback: PageClick3 });
});
});
PageClick1 = function(pageclickednumber)
{
TestClick1(pageclickednumber);
}
function TestClick1(pageclickednumber)
{
$.getJSON("ajax4.php",{ pager: pageclickednumber, count: 10 },function(json){
$("#content1").html(json[1]);
$("#pager1").pager({ pagenumber: pageclickednumber, pagecount: json[0], buttonClickCallback: PageClick1 });
});
}
PageClick2 = function(pageclickednumber)
{
TestClick2(pageclickednumber);
}
function TestClick2(pageclickednumber)
{
$.getJSON("ajax5.php",{ pager: pageclickednumber, count: 10 },function(json){
$("#content2").html(json[1]);
$("#pager2").pager({ pagenumber: pageclickednumber, pagecount: json[0], buttonClickCallback: PageClick2 });
});
}
PageClick3 = function(pageclickednumber)
{
TestClick3(pageclickednumber);
}
function TestClick3(pageclickednumber)
{
$.getJSON("ajax6.php",{ pager: pageclickednumber, count: 10 },function(json){
$("#content3").html(json[1]);
$("#pager3").pager({ pagenumber: pageclickednumber, pagecount: json[0], buttonClickCallback: PageClick3 });
});
}
</script>
</head>
<body>
<!-- Tabs -->
<div id="tabs">
<ul>
<li><a href="#tabs-1">2009 years </a></li>
<li><a href="#tabs-2">2008 years </a></li>
<li><a href="#tabs-3">2007 years </a></li>
</ul>
<div id="tabs-1">
<div id="content1" ></div>
<div id="pager1" ></div>
</div>
<div id="tabs-2">
<div id="content2" ></div>
<div id="pager2" ></div>
</div>
<div id="tabs-3">
<div id="content3" ></div>
<div id="pager3" ></div>
</div>
</div>
</body>
</html>
Page face ajax4. PHP, ajax5. PHP, ajax6. PHP three page getJson request,
The code of these three pages is almost the same, just a classification of years, I did not do code optimization here,
In fact, it can be completely processed in the same page, the request address with a parameter on the line.
The code of ajax.php is as follows:
<?php
header("content-type:text/html;charset:utf-8");
$db = @ mysql_connect(" Server host address "," Database account "," Database password ");
mysql_select_db(" The database name ");
$rs=mysql_query("set names utf8");
//If the pager parameter is passed
if(isset($_GET['pager']) && isset($_GET['count']))
{
echo GetPager($_GET['count'],$_GET['pager']);
}
else
{
echo " No parameters passed in !";
}
function GetPager($count,$pager)
{
$begin = The start time ;
$end = The end of time ;
$rs=mysql_query("SELECT * FROM The data table WHERE (pubdate BETWEEN $begin AND $end) ORDER BY pubdate DESC limit ".($pager-1)*$count.",".$count);
while ($r=mysql_fetch_assoc($rs))
{
$temp[]=$r;
}
$html_string="<table cellpadding='0' border='0' align='center' width='400' style=' padding: 8px 4px 1px 10px; ' cellpacing='0'>";
foreach($temp as $k=>$v)
{
//Suppose the url field is the link address, title is the news title, and pubdate is the publication time
$html_string.=" <tr height='22'><td valign='middle' width='*' class='tt2'><img align='middle' alt='*' src='/images/bullet.gif'/> <a target='_blank' href='".$v['url']."'>".$v['title']."</a></td><td align='right' width='100'>".$v["pubdate"]."</td></tr>";
}
$html_string.="</table>";
//This is the number of news reads. It is not recommended to read too much
$num=40;
//The total number of pages of the news is rounded
$num_string=ceil($num/$count);
//Here, the data in JSON format is returned in the form of key-value pairs. 0 is the total number of pages of the news and 1 is the spliced HTML news page
$arr=array("0"=>$num_string, "1"=>$html_string);
$jarr=json_encode($arr);
echo $jarr;
}
?>
(link: http://xiazai.jb51.net/200912/yuanma/jquery_all.rar)