ThinkPHP6 实现分页和分页样式

/*用db和model 均可以实现分页，用db的使用方法：
$articles = Db::name(‘Articles’)->where(‘isdel’, 0)->paginate(3);
*用mode 的分页方法，会自动转换成数组
*/
$articles = Articles::where(‘isdel’, 0)->paginate(3);

使用page实现分页

page方法也是模型的连贯操作方法之一，是完全为分页查询而诞生的一个人性化操作方法。

后台代码：

复制代码
$page=empty($params[‘page’]) ? 1 : $params[‘page’];//获取当前页数
$Products=Db::table{(}^{\prime }Product{s}^{\prime })->alias{(}^{\prime }{a}^{\prime })->join{(}^{\prime }ProductsBrand{b}^{\prime }{,}^{\prime }a.BrandId=b.BrandI{d}^{\prime })->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);
复制代码
前台代码：

• {for start='1' comparison='<=' end='$sum'}
• $i])}">{$i}
• {/for}

第三种：使用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);
前台代码：

首先说一下前提条件是多应用模式下，假设每页显示 3 条记录。

控制器文件所在路径：

/app/index/controller/DemoController.php

模板视图文件所在路径：

/app/index/view/demo/index.html

一、先来看默认情况下，ThinkPHP6 自带的分页样式

1、控制器 DemoController.php 代码如下：<?php

namespace app\index\controller;

use app\BaseController;

use think\facade\Db;

use think\facade\View;

class DemoController extends BaseController

{

// 列表

// http://localhost/index.php/index/Demo/index.html

public function index()

{

//

// 列表数据 开始

//

$news_title = input(‘param.news_title’);

$where = " is_show=‘Y’ ";

if($news_title != ‘’)

{

$where.="andnew{s}_{t}itlelik{e}^{\prime }$news_title."%’ ";

}

// 完整分页

$list=Db::name{(}^{\prime }new{s}^{\prime })->field{(}^{\prime }new{s}_{i}d,new{s}_{t}itl{e}^{\prime })->where($where)->order(‘news_id desc’)->paginate(3);

// 简洁分页

//$list=Db::name{(}^{\prime }new{s}^{\prime })->field{(}^{\prime }new{s}_{i}d,new{s}_{t}itl{e}^{\prime })->where($where)->order(‘news_id desc’)->paginate(3, true);

$pages = $list->render(); //分页

$list = $list->toArray(); //数据集

View::assign(‘list’, $list);

View::assign(‘pages’, $pages);

//

// 列表数据 结束

//

return View::fetch();

}

}

2、模板视图文件 index.html 代码如下：HTML>

DEMO

• { font-size:14px;}

table { border:1px solid #DDD; border-collapse:collapse;}

table td { border:1px solid #DDD; border-collapse:collapse; padding:5px;}

ID 标题
{volist name=“list.data” id=“vo”}

{KaTeX parse error: Expected 'EOF', got '}' at position 11: vo.news_id}̲{vo.news_title}
{/volist}

{$pages|raw}
3、完整分页的样式

如图所示：

0b8110d8b00299b70ed76df81639bc02.png

4、简洁分页的样式

如图所示：

c6b3822634ddaec33c2197c31270171c.png

5、尝试分页的情况下，网址中带搜索条件

http://localhost/index.php/index/Demo/index.html?news_title=php

此时，点击下一页，会发现，搜索条件 news_title=php 丢失了

二、下面就来解决这些问题

1、先来解决默认分页样式中的 《 》 上一页，下一页的小箭头的问题

(1)把 Bootstrap 分页类复制过来

ThinkPHP 中的 Bootstrap 分页类的位置：

/vendor/topthink/think-orm/src/paginator/driver/Bootstrap.php

把这个分页类放到如下的位置：

首先在 /app/ 目录下，新建 common 文件夹

/app/common/Bootstrap.php

(2)打开这个分页类文件

第 27 行 把 « 修改为 上一页

即：protected function getPreviousButton(string $text = “«”): string

修改为：protected function getPreviousButton(string $text = “上一页”): string

第 46 行 把 » 修改为 下一页

即：protected function getNextButton(string $text = ‘»’): string

修改为：protected function getNextButton(string $text = ‘下一页’): string

(3)修改配置参数

文件位置：/app/provider.php

新增如下代码：

// 自定义分页类

//‘think\Paginator’ => ‘app\common\Bootstrap’

即：<?php

use app\ExceptionHandle;

use app\Request;

// 容器Provider定义文件

return [

‘think\Request’ => Request::class,

‘think\exception\Handle’ => ExceptionHandle::class,

// 自定义分页类

‘think\Paginator’ => ‘app\common\Bootstrap’

];

2、完整分页时，对分页样式的优化

在模板视图文件中添加如下 CSS 代码：/* 前台 完整分页 分页效果 - bootstrap 样式 start */

.pagination {

display: inline-block;

padding-left: 0;

margin: 20px 0;

border-radius: 4px;

}

.pagination > li {

display: inline;

}

.pagination > li > a,

.pagination > li > span {

position: relative;

float: left;

padding: 6px 12px;

margin-left: -1px;

line-height: 1.42857143;

color: #337ab7;

text-decoration: none;

background-color: #fff;

border: 1px solid #ddd;

}

.pagination > li:first-child > a,

.pagination > li:first-child > span {

margin-left: 0;

border-top-left-radius: 4px;

border-bottom-left-radius: 4px;

}

.pagination > li:last-child > a,

.pagination > li:last-child > span {

border-top-right-radius: 4px;

border-bottom-right-radius: 4px;

}

.pagination > li > a:hover,

.pagination > li > span:hover,

.pagination > li > a:focus,

.pagination > li > span:focus {

z-index: 2;

color: #23527c;

background-color: #eee;

border-color: #ddd;

}

.pagination > .active > a,

.pagination > .active > span,

.pagination > .active > a:hover,

.pagination > .active > span:hover,

.pagination > .active > a:focus,

.pagination > .active > span:focus {

z-index: 3;

color: #fff;

cursor: default;

background-color: #337ab7;

border-color: #337ab7;

}

.pagination > .disabled > span,

.pagination > .disabled > span:hover,

.pagination > .disabled > span:focus,

.pagination > .disabled > a,

.pagination > .disabled > a:hover,

.pagination > .disabled > a:focus {

color: #777;

cursor: not-allowed;

background-color: #fff;

border-color: #ddd;

}

.pagination-lg > li > a,

.pagination-lg > li > span {

padding: 10px 16px;

font-size: 18px;

line-height: 1.3333333;

}

.pagination-lg > li:first-child > a,

.pagination-lg > li:first-child > span {

border-top-left-radius: 6px;

border-bottom-left-radius: 6px;

}

.pagination-lg > li:last-child > a,

.pagination-lg > li:last-child > span {

border-top-right-radius: 6px;

border-bottom-right-radius: 6px;

}

.pagination-sm > li > a,

.pagination-sm > li > span {

padding: 5px 10px;

font-size: 12px;

line-height: 1.5;

}

.pagination-sm > li:first-child > a,

.pagination-sm > li:first-child > span {

border-top-left-radius: 3px;

border-bottom-left-radius: 3px;

}

.pagination-sm > li:last-child > a,

.pagination-sm > li:last-child > span {

border-top-right-radius: 3px;

border-bottom-right-radius: 3px;

}

/* 前台 完整分页 分页效果 - bootstrap 样式 end */

分页效果，如图所示：

20799251085aee69e18e989bc5ae216b.png

3、简洁分页时，对分页样式的优化

在模板视图文件中添加如下 CSS 代码：/* WAP 简洁分页 分页效果 - bootstrap 样式 start */

ul.pager li { margin-left:10px; margin-right:10px;}

.pager {

padding-left: 0;

margin: 20px 0;

text-align: left;

list-style: none;

}

.pager li {

display: inline;

}

.pager li > a,

.pager li > span {

display: inline-block;

padding: 5px 14px;

background-color: #fff;

border: 1px solid #ddd;

border-radius: 15px;

}

.pager li > a:hover,

.pager li > a:focus {

text-decoration: none;

background-color: #eee;

}

.pager .next > a,

.pager .next > span {

float: right;

}

.pager .previous > a,

.pager .previous > span {

float: left;

}

.pager .disabled > a,

.pager .disabled > a:hover,

.pager .disabled > a:focus,

.pager .disabled > span {

color: #777;

cursor: not-allowed;

background-color: #fff;

}

/* WAP 简洁分页 分页效果 - bootstrap 样式 end */

分页效果，如图所示：

13331f321bf65113f725f53f7d101bba.png

4、分页时，搜索条件丢失的解决方法

只需要把 paginate 方法，稍作如下调整，即可完美解决

(1)完整分页时

将 paginate 方法，由// 完整分页

$list=Db::name{(}^{\prime }new{s}^{\prime })->field{(}^{\prime }new{s}_{i}d,new{s}_{t}itl{e}^{\prime })->where($where)->order(‘news_id desc’)->paginate(3);

修改为：// 完整分页

$list=Db::name{(}^{\prime }new{s}^{\prime })->field{(}^{\prime }new{s}_{i}d,new{s}_{t}itl{e}^{\prime })->where($where)->order(‘news_id desc’)->paginate([‘list_rows’=>3, ‘query’=>request()->param()], false);

(2)简洁分页时

将 paginate 方法，由// 简洁分页

$list=Db::name{(}^{\prime }new{s}^{\prime })->field{(}^{\prime }new{s}_{i}d,new{s}_{t}itl{e}^{\prime })->where($where)->order(‘news_id desc’)->paginate(3, true);

修改为：// 简洁分页

$list=Db::name{(}^{\prime }new{s}^{\prime })->field{(}^{\prime }new{s}_{i}d,new{s}_{t}itl{e}^{\prime })->where($where)->order(‘news_id desc’)->paginate([‘list_rows’=>3, ‘query’=>request()->param()], true);

经过测试，在 ThinkPHP6 的分页中遇到的分页样式不美观，尤其是搜索条件丢失的问题，得到完美解决