phalcon 使用pjax实现无刷新分页

时间 2019-11-08

标签 phalcon 使用 pjax 实现刷新分页繁體版

原文原文链接

前端页面（有用到phalcon的分层渲染$this->getContent()）：

 1 <div>
 2     <p>这是首页</p>
 3 
 4     <div>
 5         <a data-pjax url="/home/Index/data" href="javascript:;">点击加载人员名单</a>
 6     </div>
 7     <div id="pjax-container">
 8 
 9     </div>
10 </div>
11 <script type="text/javascript">
12    $(function(){
13         //点击加载pjax方法
14         $('a[data-pjax]').click(function cilckss(){
15             var url=$(this).attr('url');//获取url
16             $.pjax({ url:url , container: '#pjax-container' });
17         })
18    })
19 </script>


后台控制器：

  1 /**
  2  * @return bool
  3  * 判断是否为pjax请求
  4  */
  5 protected function is_pjax(){
  6    return array_key_exists('HTTP_X_PJAX', $_SERVER)
  7    && $_SERVER['HTTP_X_PJAX'] === 'true';
  8 }
  9 /**
 10  * 返回pjax请求的数据
 11  * 注意：pjax只能返回html页面模版，不能输出字符串
 12  * 包含phalcon自带分页
 13  */
 14 
 15 public function dataAction(){
 16    $this->view->disable();
 17 
 18    $currentPage = $this->request->getQuery("page","int",1);
 19    $robots = UserModel::lists();
 20    $paginator = new PaginatorModel(
 21       [
 22          "data"  => $robots,
 23          "limit" => 10,
 24          "page"  => $currentPage,
 25       ]
 26    );
 27    $page = $paginator->getPaginate();
 28    if($this->is_pjax()){//判断是不是pjax请求
 29 
 30       $this->sss($page);//局部模版
 31    }else{
 32        $this->fff($page);//全局模版
 33    }
 34 }
 35 
 36 /**
 37  * @param $page
 38  * pjax请求的局部模版
 39     * 回传后css及js失效，需在后台处理
 40  */
 41 public function sss($page){
 42 ?>
 43    <table class="table">
 44       <thead>
 45       <tr>
 46          <th>id</th>
 47          <th>姓名</th>
 48          <th>年龄</th>
 49          <th>性别</th>
 50          <th>身高</th>
 51          <th>体重</th>
 52       </tr>
 53       </thead>
 54       <?php foreach ($page->items as $item) { ?>
 55          <tbody class="body-table">
 56          <tr>
 57             <td><?php echo $item->id; ?></td>
 58             <td><?php echo $item->name; ?></td>
 59             <td><?php echo $item->age; ?></td>
 60             <td><?php echo $item->gender; ?></td>
 61             <td><?php echo $item->height; ?></td>
 62             <td><?php echo $item->weight; ?></td>
 63          </tr>
 64          </tbody>
 65       <?php } ?>
 66    </table>
 67 
 68    <a data-pjax url="/home/Index/data?page=1" href="javascript:;">首页</a>
 69    <a data-pjax url="/home/Index/data?page=<?= $page->before; ?>" href="javascript:;">上一页</a>
 70    <a data-pjax url="/home/Index/data?page=<?= $page->next; ?>" href="javascript:;">下一页</a>
 71    <a data-pjax url="/home/Index/data?page=<?= $page->last; ?>" href="javascript:;">尾页</a>
 72 
 73    <?php echo "你当前在第", $page->current, "页， 共 ", $page->total_pages,"页"; ?>
 74    <script type="text/javascript">
 75       $(function(){
 76          $('a[data-pjax]').click(function(){
 77             var url=$(this).attr('url')
 78             $.pjax({ url:url , container: '#pjax-container' })
 79          })
 80       })
 81    </script>
 82 <?php
 83 }
 84 
 85 /**
 86  * @param $page
 87  * 若是F5强制刷新，将重载整个页面
 88  */
 89 
 90 public function fff($page){
 91 ?>
 92       <!DOCTYPE html>
 93       <html lang="en">
 94       <head>
 95          <meta charset="UTF-8">
 96          <meta http-equiv="X-UA-Compatible" content="IE=edge">
 97          <meta name="viewport" content="width=device-width, initial-scale=1">
 98          <title></title>
 99          <script type="text/javascript" src="/public/jquery.js"></script>
100          <script type="text/javascript" src="/public/jquery.pjax.js"></script>
101 
102          <script type="text/javascript" src="/public/bootstrap/js/bootstrap.min.js"></script>
103          <link rel="stylesheet" href="/public/bootstrap/css/bootstrap.min.css">
104       </head>
105       <body>
106       <div>
107          <p>这是首页</p>
108 
109          <div>
110             <a data-pjax url="/home/Index/data" href="javascript:;">点击加载人员名单</a>
111          </div>
112          <div id="pjax-container">
113             <?php
114             $this->sss($page);
115             ?>
116          </div>
117       </div>
118       </body>
119       </html>
120 <?php
121 }


页面效果：

以上只是半成品，正琢磨利用pjax封装的函数进行处理强制加载和动画；参考：https://github.com/defunkt/jquery-pjax