当前位置: 代码迷 >> Ajax >> ThinkPHP & Jquery Ajax分页演练
  详细解决方案

ThinkPHP & Jquery Ajax分页演练

热度:612   发布时间:2012-09-10 11:02:32.0
ThinkPHP & Jquery Ajax分页演示

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

IndexAction 文件代码

  1. class IndexAction extends Action
  2. {
  3.         public function index()
  4.         {
  5.                 $Page = D('Page');
  6.                
  7.                 import("ORG.Util.Page");       
  8.                 $count = $Page->count();
  9.                 $p     = new Page($count,10);
  10.                
  11.                 $json['list'] = $Page->findAll('','','id DESC',$p->firstRow.','.$p->listRows);
  12.                 $json['page'] = $this->ajax_page($p->show(true));
  13.                
  14.                 $json = json_encode($json);
  15.                
  16.                 if(empty($_GET['do']))
  17.                 {
  18.                     $this->assign('json',$json);
  19.                         $this->display();
  20.                 }
  21.                 else
  22.                 {
  23.                     echo $json;
  24.                 }
  25.         }
  26.        
  27.         //--> ajax分页扩展
  28.         public function ajax_page($page_array=array(),$step=10)
  29.         {
  30.             if ($page_array['totalPages'] >1)
  31.                 {
  32.                         $page['first'] = 1;
  33.                        
  34.                         $pre = intval($page_array['nowPage']/$step);       
  35.                         $pre >0 ? $first = $page_array['nowPage']-$step : $first = $pre*$step+1 ;
  36.                         $pre >0 ? $end   = $page_array['nowPage']+$step : $end   = ($pre+1)*$step;
  37.                         if ($end >$page_array['totalPages'])
  38.                         {
  39.                             $first = $page_array['totalPages'] - $step;
  40.                                 $end   = $page_array['totalPages'];
  41.                         }
  42.                        
  43.                         $first <1 ? $first = 1 : $first = $first;
  44.                        
  45.                         for($i=$first; $i<=$end; $i++)
  46.                         {
  47.                                 if($i != $page_array['nowPage'])
  48.                                 {
  49.                                     $page['list'][$i]['id']  = $i;
  50.                                         $page['list'][$i]['act'] = 1;
  51.                                 }
  52.                                 else
  53.                                 {
  54.                                     $page['list'][$i]['id']  = $i;
  55.                                         $page['list'][$i]['act'] = 0;
  56.                                 }
  57.                         }       
  58.                         $page['end'] = $page_array['totalPages'];
  59.                 }
  60.                 return $page;
  61.         }
  62. }
  63. ?>
复制代码

模板文件

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>泰申旅行网 www.fdays.com</title>
  6. <script type="text/javascript" src="__ROOT__/js/jquery.js"></script>
  7. <script type="text/javascript">
  8. $(function(){
  9.   // DOM文档已经载入就绪
  10.   var data = {$json};
  11.   ajax_page(data);
  12. });

  13. function show_page(p) //显示分页
  14. {
  15.         $('.page').html('loading...');
  16.         $.ajax({
  17.             type: "get",
  18.                 dataType: "json",
  19.                 url: "__URL__/index/do/ajax_page/p/"+p,
  20.                 //async:false, //是否异步
  21.                 complete :function(){ }, //AJAX请求完成时
  22.                 success: function(data){
  23.                    ajax_page(data);
  24.                 }
  25.         })
  26. }

  27. function ajax_page(data) //渲染模板
  28. {
  29.         $('.page').html('');       
  30.         if (data.page != null)
  31.         {
  32.                 //-->分类
  33.                 var first = '<li><a href="javascript: show_page('+data.page.first+')">&laquo;</a></li>';
  34.                 var end   = '<li><a href="javascript: show_page('+data.page.end+')">&raquo;</a></li>';
  35.                 var list  = '';
  36.                
  37.                 $.each(data.page.list, function(i, n)
  38.                 {
  39.                         if(n.act == 1)
  40.                         {
  41.                                 list += '<li><a href="javascript: show_page('+n.id+')">'+n.id+'</a></li>';
  42.                         }
  43.                         else
  44.                         {
  45.                                 list += '<li>'+n.id+'</li>';
  46.                         }
  47.                 })               
  48.                 $('.page').html('<ul>'+first+list+end+'</ul>');       
  49.         }
  50.          
  51.         $('.list_tab .ready').remove(); //移除现有的数据.
  52.         if (data.list != null)
  53.         {
  54.                  //-->渲染模板
  55.                 $($('.list_template').get(0)).show(); //显示模板,复制         
  56.                 $.each(data.list, function(i, n)
  57.                 {
  58.                      row = $(".list_template").clone();
  59.                          
  60.                          
  61.                          
  62.                          row.find(".id").html(n.id);
  63.                          row.find(".title").html('<strong>'+n.title+'</strong>');
  64.                          
  65.                          row.attr("class","ready"); //为每个行写入 ready 以便显示另一页时移除
  66.                          row.appendTo(".list_tab"); //写入表格
  67.                  })
  68.         }
  69.         $($('.list_template').get(0)).hide(); //隐藏模板
  70. }

  71. </script>

  72. <style type="text/css">
  73. body{margin:0; padding:6px; font-size:12px; line-height:140%;}
  74. .page{background:#EEF5FD; margin:5px 0; height:32px; border:1px solid #AACCEF;}
  75. .page ul{ margin:0; padding:0;}
  76. .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;}
  77.    .page li a{ display:block; float:left; height:20px; width:20px; text-decoration:none; background:#FBFBFA; color:#666; font-weight:normal;}
  78.       .page li a:hover{ background:#F0F7E8;}
  79.           
  80. .list_tab{ text-align:left; border-left:1px solid #AACCEF; border-right:1px solid #AACCEF; border-bottom:1px solid #AACCEF;}
  81.   .list_tab th{ background:#08509A; color:#fff; padding:6px;}
  82.   .list_tab td{ border-bottom:1px dashed #AACCEF; padding:4px; color:#08509A; }
  83.   
  84. h1{ color:#08509A; padding:15px 0;}
  85. </style>
  86. </head>
  87. <body>
  88.   <h1>ThinkPHP & Jquery Ajax分页演示</h1>
  89.   
  90.   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="list_tab">
  91.     <tr>
  92.       <th>id</th>
  93.       <th>标题</th>
  94.     </tr>
  95.     <!-- 模板部分 -->
  96.     <tr class="list_template">
  97.         <td class="id"></td>
  98.         <td class="title"></td>
  99.     </tr>
  100.   </table>
  101.   
  102.   <div class="page"></div>
  103. </body>
  104. </html>

  相关解决方案