技術標籤：phplayui

文章轉載出處：https://www.ziruchu.com/art/241

有些時候框架自帶的分頁並不能滿足專案的需求，這時自定義分頁樣式就是首選了。此篇文章記錄ThinkPHP6+Layui自定義分頁樣式的基礎使用。

關於layui分頁樣式，自己到layui官方文件尋找自己喜歡的樣式。

第一步：複製ThinkPHP6分頁程式碼

找到ThinkPHP6分頁程式碼到所需要的位置，

// ThinkPHP6分頁程式碼位置
// vendor\topthink\think-orm\src\paginator\driver\Bootstrap.php

複製到Bootstrap.php

第二步：修改自定義分頁CustomPaginate.php

// app\admin\CustomPaginate.php

// 修改一：修改名稱空間
namespace app\admin;

// 修改二：修改渲染分頁html
/**
* 渲染分頁html
* @return mixed
*/
public function render()
{
   if ($this->hasPages()) {
       if ($this->simple) {
           return sprintf
 
(
               '<div class="layui-box layui-laypage layui-laypage-molv" id="layui-laypage-3">%s %s</div>',
               $this->getPreviousButton(),
               $this->getNextButton()
           );
       } else {
           return sprintf(
               '<div class="layui-box layui-laypage layui-laypage-molv" id="layui-laypage-3">%s %s %s</div>'
 
,
               $this->getPreviousButton(),
               $this->getLinks(),
               $this->getNextButton()
           );
       }
   }
}

//修改三：修改上一頁按鈕
protected function getPreviousButton(string $text = "上一頁"): string{
}

//修改四：修改下一頁按鈕
protected function getNextButton(string $text = '下一頁'): string{   
}

// 修改五：生成一個可點選的按鈕
protected function getAvailablePageWrapper(string $url, string $page): string
{
   return '<a href="' . htmlentities($url) . '">' . $page . '</a>';
}

// 修改六：生成一個禁用的按鈕
protected function getDisabledTextWrapper(string $text): string
{
   return '<a class="layui-laypage-prev layui-disabled">' . $text . '</a>';
}

// 修改七：生成一個啟用的按鈕
protected function getActivePageWrapper(string $text): string
{
return '<span class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>' . $text . '</em></span>';
}

第三步：註冊自定義分頁

在app\provide.php檔案中註冊自定義分頁。註冊自定義分頁後即是使用自定義分頁。

// app\provide.php
<?php
use app\ExceptionHandle;
use app\Request;

// 容器Provider定義檔案
return [
   // ... 省略其他
   'think\Paginator'   => app\admin\CustomPaginate::class
];

經過這三個步驟後，自定義分頁就完成了。

第四步：靜態模板中使用分頁

<div>
{$lists|raw}
</div>

至此：自定義分頁與使用完成。

最後：完成時的效果圖