php jquery实现新闻标签分类和无刷新分页

现在jquery已经得到了广泛的应用，在很多网站的新闻版块，不用刷新和分页，就达到了标签分类的效果。我自己也尝试写了一个，渲染如下(风格可以根据用户需求调整):。

接下来详细介绍实现过程：我一向是见招拆招的解决思路，这里需要运用到3个东西——标签页效果插件和分页插件，jquery的getJson请求。因此我使用了框架插件，jquery-page插件，现提供下载地址：jquery_all.rar里面包含了3个射流研究…脚本文件和2个样式表： jquery-1。3 .2 .量滴jsjquery。寻呼机。jsjquery-ui-1。7 .2 .定制。量滴jsjquery-ui-1。7 .2 .定制。CSS页面。CSS html页面代码如下：复制代码代码如下：html头元http-equiv='内容-类型' Content=' text/html；charset=utf-8 '/title PHP jquery ui jquery pager/title link type=' text/CSS ' href='/CSS/jquery-ui-1。7 .2 .定制。CSS ' rel='样式表/link rel='样式表href='/CSS/page。CSS ' type=' text/CSS '/script type=' text/JavaScript ' src=' http :/js/jquery-1。3 .2 .量滴js '/'ready(function(){ $(' # tab ')).制表符();$.getJSON('ajax4.php '，{ pager: 1，count: 10 }，function(json){ $('#content1 ').html(JSON[1])；$('#pager1 ').寻呼机({ pagenumber: 1，pagecount: json[0]，button click callback : page click 1 })；});$.getJSON('ajax5.php '，{ pager: 1，count: 10 }，function(json){ $('#content2 ').html(JSON[1])；$('#pager2 ').寻呼机({ pagenumber: 1，pagecount: json[0]，button click callback : page click 2 })；});$.getJSON('ajax6.php '，{ pager: 1，count: 10 }，function(json){ $('#content3 ').html(JSON[1])；$('#pager3 ').寻呼机({ pagenumber: 1，pagecount: json[0]，button click callback : page click 3 })；});});页面点击1=函数(页面点击ed数){测试点击1(页面点击ed数)；}函数测试点击1(页面点击次数){ $ .getJSON('ajax4.php '，{ pager: pageclickednumber，count: 10 }，function(json){ $('#content1 ').html(JSON[1])；$('#pager1 ').寻呼机({页码：页面点击数，pagecount: json[0]，buttonclickcallback :页面点击1 })；});}页面点击2=函数(页面点击ed数){测试点击2(页面点击ed数)；}函数测试点击2(页面点击次数){ $ .getJSON('ajax5.php '，{ pager: pageclickednumber，count: 10 }，function(json){ $('#content2 ').html(JSON[1])；$('#pager2 ').寻呼机({页码：页面点击数，pagecount: json[0]，buttonclickcallback :页面点击2 })；});}页面点击3=函数(页面点击ed数){测试点击3(页面点击ed数)；}函数测试点击3(页面点击次数){ $ .getJSON('ajax6.php '，{ pager: pageclickednumber，count: 10 }，function(json){ $('#content3 ').html(JSON[1])；$('#pager3 ').寻呼机({页码：页面点击数，pagecount: json[0]，buttonclickcallback :页面点击3 })；});}/脚本/头体！-制表符- div id='制表符ul lia href=' #制表符-1'2009年/a/李莉2008年年/a/李莉2007年年/a/Li/ul div id=' tab-1 ' div id=' content 1 '/div div id=' page 1 '/div/div id=' tab-2 ' div id=' content 2 '/div id=' page 2 '/div/div id=' tab-3 ' div id=' content 3 '/div div id=' page 3 '/div/div/body/html页面对ajax4.php，ajax5.php，ajax6.php三个页面进行了getJson请求，这3个页面代码都差不多，无非是年份的分类而已，我这里没做代码优化了，实际完全可以放在同一个页面里处理完，请求地址里附带个参数就行了。

ajax.php代码如下：复制代码代码如下：服务器端编程语言（Professional Hypertext Preprocessor的缩写）标头(' content-type : text/html；字符集： utf-8’；$db=@ mysql_connect('服务器主机地址','数据库帐号','数据库密码');mysql_select_db('数据库名');$ RS=MySQL _ query(' set name utf8 ')；//如果传递了寻呼机参数if(isset($ _ GET[' pager '])isset($ _ GET[' count ']){ echo GetPager($ _ GET[' count ']，$ _ GET[' pager '])；} else { echo '没有传入参数!'；}函数GetPager($count，$pager) { $begin=开始时间；$end=结束时间；$rs=mysql_query('SELECT * FROM数据表其中（发布日期在$开始和$end之间)按发布日期表名限制订购$寻呼机-1)* $计数，'.$ count)；while($ r=MySQL _ fetch _ assoc($ RS)){ $ temp[]=$ r；} $ html _ string=' table单元格填充=' 0 '边框=' 0 '对齐='中心'宽度=' 400 '样式=' padd : 8px 4px 1px 10pxcell pace=" 0foreach($temp as $k=$v) { //假设全球资源定位器(统一资源定位符)字段为链接地址，标题为新闻标题，出版日期为发表时间$html_string .=' tr height=' 22 ' TD valgn=' middle ' width=' * ' class=' tt2 ' img align=' middle ' alt=' * ' src='/images/bullet。gif '/a target=' _ blank ' href=' .$v['url']' '。$ v[title ]./a/tdtd align='right' width='100 ' .$ v['公共日期']./TD/tr '；} $html_string .='/table '；//这个是新闻读取的数量，不建议读取太多$ num=40/新闻的总页数取整$ num _ string=ceil($ num/$ count)；//这里用键值对的方式返回数据格式的数据，0为新闻总页数，1为拼接的超文本标记语言新闻页面$ arr=数组(“0”=$ num _ string，“1”=$ html _ string)；$ jarr=JSON _ encode($ arr)；echo $ jarr}？jquery_all.rar