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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。