Layui的分页模块在网站中的应用

制作网站的时候，有时候我们常常会被一些要求复杂的分页给困住，最后要么就是写一个简单的分页，要么就做成瀑布流的形式。

有了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