您的位置: 首页  >  IT文章  >  ThinkPHP & Jquery Ajax分页演练

ThinkPHP & Jquery Ajax分页演练

分类: IT文章 • 2022-05-05 00:34:28
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. });

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

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

  74. </script>

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

相关推荐