效果图(前台显示新闻列表)
注:以下的代码中的css实现没有包括,可以自己去实现。通过ajax的回调函数success等,获取数据库中的数据,然后再通过js将数据输出到php中,从而动态显示数据。以作备忘。
代码实现
pages.js
var curPage =1;//当前页码
var total,pageSize,totalPage;
//获取数据
function getData(page){
$.ajax({
type:'POST',
url:'page.php',
data:{'pageNum':page-1},
dataType:'json',
beforeSend:function(){
$("#list ul").append("<li id='loading'>loading...</li>");
},
success:function(json){
$("#list ul").empty();
total = json.total;//总记录数
pageSize = json.pageSize;//每页显示条数
curPage = page;//当前页
totalPage = json.totalPage;//总页数
var li ="";
var list = json.list;
$.each(list,function(index,array){//遍历json数据列
if(array['title'].length >28){
var title_sub = array['title'].substring(0,20);// 获取子字符串。
}
elsevar title_sub = array['title'];
if(0==index &&1==curPage)li +="<li><a href=\""+ array['content']+"\"style=\"color:red;font-weight:900;\"target=\"myIframe\" title=\""+array['title']+"\">"+title_sub+"</a><div class='div_date'>"+array['date']+"</div></li>";
elseif(1==index &&1==curPage)li +="<li><a href=\""+ array['content']+"\"style=\"color:Darkorange;font-weight:700;\"target=\"myIframe\" title=\""+array['title']+"\">"+title_sub+"</a><div class='div_date'>"+array['date']+"</div></li>";
elseif(2==index &&1==curPage)li +="<li><a href=\""+ array['content']+"\"style=\"color:Greenyellow;font-weight:500;;\"target=\"myIframe\" title=\""+array['title']+"\">"+title_sub+"</a><div class='div_date'>"+array['date']+"</div></li>";
else li +="<li><a href=\""+ array['content']+"\"target=\"myIframe\" title=\""+array['title']+"\">"+title_sub+"</a><div class='div_date'>"+array['date']+"</div></li>";
});
$("#list ul").append(li);
},
complete:function(){//生成分页条
getPageBar();
},
error:function(){
alert("数据加载失败");
}
});
}
//获取分页条
function getPageBar(){
//页码大于最大页数
if(curPage>totalPage) curPage=totalPage;
//页码小于1
if(curPage<1) curPage=1;
pageStr ="<span>共"+total+"条</span><span>"+curPage+"/"+totalPage+"</span>";
//如果是第一页
if(curPage==1){
pageStr +="<span>首页</span> <span>上一页</span> ";
}else{
pageStr +="<span><a href='javascript:void(0)' rel='1'>首页</a> </span><span><a href='javascript:void(0)' rel='"+(curPage-1)+"'>上一页</a> </span>";
}
//如果是最后页
if(curPage>=totalPage){
pageStr +="<span>下一页</span> <span>尾页</span> ";
}else{
pageStr +="<span><a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>下一页</a> </span><span><a href='javascript:void(0)' rel='"+totalPage+"'>尾页</a> </span>";
}
$("#pagecount").html(pageStr);
}
$(function(){
getData(1);
$("#pagecount span a").live('click',function(){
var rel = $(this).attr("rel");
if(rel){
getData(rel);
}
});
});
page.php
<?php
/*数据库连接文件,这个只需连接即可*/
include_once('../connect/connect.php');
$page=intval($_POST['pageNum']);
$result=mysql_query("select id from news");
$total=mysql_num_rows($result);//总记录数
$pageSize=6;//每页显示数
$totalPage=ceil($total/$pageSize);//总页数
$startPage=$page*$pageSize;
$arr['total']=$total;
$arr['pageSize']=$pageSize;
$arr['totalPage']=$totalPage;
$query=mysql_query("select id,title,content,date from news order by id desc limit $startPage,$pageSize");
while($row=mysql_fetch_array($query)){
$arr['list'][]=array(
'id'=>$row['id'],
'title'=>$row['title'],
'content'=>$row['content'],
'date'=>date("Y-m-d",$row['date'])
);
}
echojson_encode($arr);
?>
news_manager.php
注意要包含进js文件。
...
<divid="list"class="list">
<ul></ul>
</div>
<divid="pagecount"></div>
...