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) :

< 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:

(link: http://xiazai.jb51.net/200912/yuanma/jquery_all.rar)
  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)


Related articles: