ThinkPHP & Jquery Ajax分页演练 _Ajax

ThinkPHP & Jquery Ajax分页演示

演示一下jquery 处理json 并根据静态html模板生成相关内容

IndexAction 文件的代码

class IndexAction extends Action
{
public function index()
{
$Page = D('Page');
import("ORG.Util.Page");
$count = $Page->count();
$p = new Page($count,10);
$json['list'] = $Page->findAll('','','id DESC',$p->firstRow.','.$p->listRows);
$json['page'] = $this->ajax_page($p->show(true));
$json = json_encode($json);
if(empty($_GET['do']))
{
$this->assign('json',$json);
$this->display();
}
else
{
echo $json;
}
}
//--> ajax分页扩展
public function ajax_page($page_array=array(),$step=10)
{
if ($page_array['totalPages'] >1)
{
$page['first'] = 1;
$pre = intval($page_array['nowPage']/$step);
$pre >0 ? $first = $page_array['nowPage']-$step : $first = $pre*$step+1 ;
$pre >0 ? $end = $page_array['nowPage']+$step : $end = ($pre+1)*$step;
if ($end >$page_array['totalPages'])
{
$first = $page_array['totalPages'] - $step;
$end = $page_array['totalPages'];
}
$first <1 ? $first = 1 : $first = $first;
for($i=$first; $i<=$end; $i++)
{
if($i != $page_array['nowPage'])
{
$page['list'][$i]['id'] = $i;
$page['list'][$i]['act'] = 1;
}
else
{
$page['list'][$i]['id'] = $i;
$page['list'][$i]['act'] = 0;
}
}
$page['end'] = $page_array['totalPages'];
}
return $page;
}
}
?>

复制代码

模板文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>泰申旅行网 www.fdays.com</title>
<script type="text/javascript" src="__ROOT__/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
// DOM文档已经载入就绪
var data = {$json};
ajax_page(data);
});
function show_page(p) //显示分页
{
$('.page').html('loading...');
$.ajax({
type: "get",
dataType: "json",
url: "__URL__/index/do/ajax_page/p/"+p,
//async:false, //是否异步
complete :function(){ }, //AJAX请求完成时
success: function(data){
ajax_page(data);
}
})
}
function ajax_page(data) //渲染模板
{
$('.page').html('');
if (data.page != null)
{
//-->分类条
var first = '<li><a href="javascript: show_page('+data.page.first+')">«</a></li>';
var end = '<li><a href="javascript: show_page('+data.page.end+')">»</a></li>';
var list = '';
$.each(data.page.list, function(i, n)
{
if(n.act == 1)
{
list += '<li><a href="javascript: show_page('+n.id+')">'+n.id+'</a></li>';
}
else
{
list += '<li>'+n.id+'</li>';
}
})
$('.page').html('<ul>'+first+list+end+'</ul>');
}
$('.list_tab .ready').remove(); //移除现有的数据.
if (data.list != null)
{
//-->渲染模板
$($('.list_template').get(0)).show(); //显示模板,复制
$.each(data.list, function(i, n)
{
row = $(".list_template").clone();
row.find(".id").html(n.id);
row.find(".title").html('<strong>'+n.title+'</strong>');
row.attr("class","ready"); //为每个行写入 ready 以便显示另一页时移除
row.appendTo(".list_tab"); //写入表格
})
}
$($('.list_template').get(0)).hide(); //隐藏模板
}
</script>
<style type="text/css">
body{margin:0; padding:6px; font-size:12px; line-height:140%;}
.page{background:#EEF5FD; margin:5px 0; height:32px; border:1px solid #AACCEF;}
.page ul{ margin:0; padding:0;}
.page li{float:left; list-style:none; margin:5px; border:1px solid #AACCEF; height:20px; width:20px; text-align:center; color:#666; font-weight:bold; line-height:180%; background:#FFF7C5;}
.page li a{ display:block; float:left; height:20px; width:20px; text-decoration:none; background:#FBFBFA; color:#666; font-weight:normal;}
.page li a:hover{ background:#F0F7E8;}
.list_tab{ text-align:left; border-left:1px solid #AACCEF; border-right:1px solid #AACCEF; border-bottom:1px solid #AACCEF;}
.list_tab th{ background:#08509A; color:#fff; padding:6px;}
.list_tab td{ border-bottom:1px dashed #AACCEF; padding:4px; color:#08509A; }
h1{ color:#08509A; padding:15px 0;}
</style>
</head>
<body>
<h1>ThinkPHP & Jquery Ajax分页演示</h1>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="list_tab">
<tr>
<th>id</th>
<th>标题</th>
</tr>
<tr class="list_template">
<td class="id"></td>
<td class="title"></td>
</tr>
</table>
<div class="page"></div>
</body>
</html>