Thinkphp5——實現分頁(模型和Db分頁，多種方法)

現在很多網站的數據量的很多，如果全部在一頁里顯示效果不好，數據量太大，那怎么辦？這時我們就需要分頁，而分頁的好處就是分段顯示數據，這樣頁面就不用加載很多數據，需要時才加載，下面我教大家實現ThinkPHP5分頁。

在分頁之前我們要先引入bootstrap的css。

 

第一種：使用limit實現分頁(不建議使用)

limit方法也是模型類的連貫操作方法之一，主要用於指定查詢和操作的數量，特別在分頁查詢的時候使用較多。ThinkPHP的limit方法可以兼容所有的數據庫驅動類的。

代碼示例：

Db::table('think_article')->limit('10,25')->select();

從第10行開始的25條數據；使用limit很麻煩，不推薦大家使用，我就不詳細講了

 

第二種：使用page實現分頁

page方法也是模型的連貫操作方法之一，是完全為分頁查詢而誕生的一個人性化操作方法。

后台代碼：

$page = empty($params['page']) ? 1 : $params['page'];//獲取當前頁數 $Products = Db::table('Products')
    ->alias('a')
    ->join('ProductsBrand b','a.BrandId=b.BrandId')
    ->where($wheres)
    ->page($page,12)
    ->select();
$count = Db::table('Products')->count();//有多少條數據
$sum = $count/12;//要分多少頁

$this->assign("Products",$Products);
$this->assign("sum",$sum);
$this->assign("page",$page);

前台代碼：

<ul class="pagination">
    {for start='1' comparison='<=' end='$sum'}
     <li class="{if $i==$page}active{/if}"><a href="{:url('jade/index',['page'=>$i])}">{$i}</a></li>
     {/for}
</ul>

 

第三種：使用paginate實現分頁(推薦)

在tp5中使用bootstrap分頁樣式，其實根本不用那么麻煩，只需要引入bootstrap的css文件就可以了。原因是tp5在組裝分頁鏈接的時候，默認是組裝bootstrap的分頁樣式鏈接，就是說，會自動加上class的屬性。ThinkPHP5.0內置了分頁實現，要給數據添加分頁輸出功能在5.0變得非常簡單，可以直接在Db類查詢的時候調用paginate方法。

組裝鏈接的函數在think5\thinkphp\library\think\paginator\driver\Bootstrap.php

后台代碼：

// 每頁顯示12條數據
$Products = Db::table('Products')
->paginate(12);

前台代碼：

<div class="f_page">
    {$Products->render();}
</div>

 

第四種：模型分頁

新聞欄目（Newsfl）

<?php
namespace app\index\model;
use think\Model;

class Newsfl extends Model     //新聞欄目分類
{
    public function comm(){
        return $this->hasMany('News','newsfl_id','id');
    }
}

新聞（News）

<?php
namespace app\index\model;
use think\Model;

class News extends Model     //新聞
{

}

開發手冊里的分頁是如下形式：

$list = Db::name('news')->where('status',1)->paginate(10);
或者
$list = News::where('status',1)->paginate(10);

如果想在關聯中實現分頁，如下：

$news = Newsfl::get($id)->comm()->paginate(3);

注：comm()是關聯方法

HTML+CSS分頁的樣式

HTML
<div class="f_page">
    {$news->render()}
</div>



CSS
/*分頁樣式*/
.f_page {
    margin-top: 10px;
    display: flex;
}
.f_page .pagination {
    position: relative;
    margin: auto;
    height: 50px;
}
.f_page .pagination>li>a,.f_page .pagination>li>span {
    font-size: 14px;
    padding: 10px 20px;
    margin: 0 2px;
    color: #000;
}
.f_page .pagination>.active>span {
    background: #00ae66;
    color: #fff;
}
.f_page .pagination>.active>span:hover {
    background: #00ae66;
}
.f_page .pagination>.active>span,.f_page .pagination>.active>span:hover{
    border-color: #00ae66;
}
.f_page ul li a:hover {
    background: #00ae66;
    text-decoration: none;
    color: #fff;
}