ThinkPHP & Jquery Ajax分页演练
ThinkPHP & Jquery Ajax分页演示演示一下jquery 处理json 并根据静态html模板生成相关内容IndexAction 文
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>
