製作網站的時候，有時候我們常常會被一些要求複雜的分頁給困住，最後要麼就是寫一個簡單的分頁，要麼就做成瀑布流的形式。

有了Layui之後，我認為開發人員多了一個選擇，那就是嘗試用Layui內建的分頁模組。

使用方法如下：

JavaScript：

layui.use(['layer','laypage','jquery'], function () {

      var layer = layui.layer,$ = layui.jquery, laypage = layui.laypage;

      //執行一個laypage例項

      // 訂單管理的分頁

      laypage.render({
 

          elem: 'fpage', //注意，這裡的 test1 是 ID，不用加 # 號

          layout: ['prev', 'page', 'next', 'count'],

          count: "{$count}", //資料總數，從服務端得到

          prev: '上一頁',

          next: '下一頁',

          limit: "{$limit}"

          ,curr: location.search.replace('?page=', '') //這裡是重點，從位址列取得當前頁
 

          ,jump: function(obj, first){

              //obj包含了當前分頁的所有引數，比如：

//                console.log(obj.curr); //得到當前頁，以便向服務端請求對應頁的資料。

//                console.log(obj.limit); //得到每頁顯示的條數

              //首次不執行

              if(!first){

                  //do something

                  window.location.href="{:U('news/lists')}?page="+obj.curr;

              }
 

          }

      });

  });

在引用Layui的js檔案的時候，要記得 layui.js 和 layui.all.js 只引用一個就可以了，否則會出現表單提交兩次的問題。

分頁樣式可以根據 Layui分頁檔案 自己定製。

PHP：

     $page=I('get.page')?(I('get.page')-1):0;

     $limit=10; //每頁數量

     $start=$limit*$page; //開始頁

     $count = $model -> getNewsCount($condition);

     $data = $model -> getNewsList($condition, 'id,title,description,thumb,create_time', $start.','.$limit, 'listorder asc,create_time desc');

     //資料傳到前端

     $this -> assign("count", $count);

     $this -> assign("limit", $limit);

     $this -> assign("data", $data);

HTML：

{volist name="data" id="vo"}

         <li class="clearfix">

             <a href="{:U('news/detail',['id'=>$vo['id']])}">

             <img src="{$vo.thumb}" alt="" class="fl">

             <div class="fl clearfix">

                 <div class="fl">

                     <h4>{$vo.title}</h4>

                     <p>

                         {$vo.description}

                     </p>

                 </div>

                 <p class="time fr">{$vo.create_time|Date='m-d',###}</p>

             </div>

             </a>

         </li>

   {/volist}

THE END