search
Homephp教程php手册php jquery 实现新闻标签分类与无刷新分页

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

Jun 13, 2016 pm 12:20 PM
jqueryphpandClassificationPaginationrefreshexistaccomplishwidelyapplicationnewsLabelNowof

现在jquery的应用越来越广泛了,在很多网站的新闻板块都实现了 标签分类 + 无刷新分页 的效果。
也自己尝试写了一个,效果图如下(样式可以按用户需求自己去整):

 

接下来详细介绍实现过程:

我一向是见招拆招的解决思路,这里需要运用到3个东西——标签页效果插件和分页插件,jquery的getJson请求。

因此我使用了jquery-ui插件,jquery-page插件,现提供下载地址:

jquery_all.rar 
 里面包含了3个JS脚本文件和2个样式表:
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.css
html页面代码如下:

复制代码 代码如下:





php + jquery ui + jquery pager













页面对ajax4.php,ajax5.php,ajax6.php三个页面进行了getJson请求,
这3个页面代码都差不多,无非是年份的分类而已,我这里没做代码优化了,
实际完全可以放在同一个页面里处理完,请求地址里附带个参数就行了。
ajax.php代码如下:

复制代码 代码如下:


header("content-type:text/html;charset:utf-8");
$db = @ mysql_connect("服务器主机地址","数据库帐号","数据库密码");
mysql_select_db("数据库名");
$rs=mysql_query("set names utf8");
//如果传递了pager参数
if(isset($_GET['pager']) && isset($_GET['count']))
{
echo GetPager($_GET['count'],$_GET['pager']);
}
else
{
echo "没有传入参数!";
}

function GetPager($count,$pager)
{
$begin = 开始时间;
$end = 结束时间;
$rs=mysql_query("SELECT * FROM 数据表 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="

";
foreach($temp as $k=>$v)
{
//假设 url字段为链接地址,title为新闻标题,pubdate为发表时间
$html_string.=" ";
}

$html_string.="
* ".$v['title']." ".$v["pubdate"]."
";
//这个是新闻读取的数量,不建议读取太多
$num=40;
//新闻的总页数取整
$num_string=ceil($num/$count);
//这里用键值对的方式 返回JSON格式的数据,0为新闻总页数,1为拼接的HTML新闻页面
$arr=array("0"=>$num_string, "1"=>$html_string);
$jarr=json_encode($arr);
echo $jarr;
}
?>

jquery_all.rar 
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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment