95.91p30.space\/index.php,关于 ThinkPHP6 分页样式的定制及点击下一页搜索条件丢失的解决方法...
首先说一下前提条件是多应用模式下,假设每页显示 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 .= " and news_title like '%".$news_title."%' ";
}
// 完整分页
$list = Db::name('news')->field('news_id, news_title')->where($where)->order('news_id desc')->paginate(3);
// 简洁分页
//$list = Db::name('news')->field('news_id, news_title')->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"}
{$vo.news_id}{$vo.news_title}
{/volist}
3、完整分页的样式
如图所示:
4、简洁分页的样式
如图所示:
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 */
分页效果,如图所示:
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 */
分页效果,如图所示:
4、分页时,搜索条件丢失的解决方法
只需要把 paginate 方法,稍作如下调整,即可完美解决
(1)完整分页时
将 paginate 方法,由// 完整分页
$list = Db::name('news')->field('news_id, news_title')->where($where)->order('news_id desc')->paginate(3);
修改为:// 完整分页
$list = Db::name('news')->field('news_id, news_title')->where($where)->order('news_id desc')->paginate(['list_rows'=>3, 'query'=>request()->param()], false);
(2)简洁分页时
将 paginate 方法,由// 简洁分页
$list = Db::name('news')->field('news_id, news_title')->where($where)->order('news_id desc')->paginate(3, true);
修改为:// 简洁分页
$list = Db::name('news')->field('news_id, news_title')->where($where)->order('news_id desc')->paginate(['list_rows'=>3, 'query'=>request()->param()], true);
经过测试,在 ThinkPHP6 的分页中遇到的分页样式不美观,尤其是搜索条件丢失的问题,得到完美解决。
95.91p30.space\/index.php,关于 ThinkPHP6 分页样式的定制及点击下一页搜索条件丢失的解决方法...相关推荐
- php页面分页6,关于 ThinkPHP6 分页样式的定制及点击下一页搜索条件丢失的解决方法...
首先说一下前提条件是多应用模式下,假设每页显示 3 条记录. 控制器文件所在路径: /app/index/controller/DemoController.php 模板视图文件所在路径: /app/ ...
- Django 搜索结果分页的实现 以及点击下一页搜索条件丢失可能的原因分析
1.Django 搜索结果分页的实现 在这里我们用django自带的分页模块来实现 这个paginator对象中带有如下属性: #per_page:每页显示条目数量 #count:数据总个数 #num ...
- 95.91p30.space\/index.php,快乐每一天
不需要在网上找什么乱七八糟的东西,直接来之即用岂不是很完美. 只需要有一台服务器即可,没备案都可以玩这个功能.不需要拥有服务号,看完全文你就明白了. 数据库篇:-- Adminer 4.6.3 MyS ...
- 用js做分页,点击下一页时,直接跳到了最后一页——Number()的妙用
Number()的妙用 Number()是javascript中将字符型转换为数值型的函数: 问题描述:做分页,用js实现,获取当前页面的值,然后js自加1,可是点击下一页时,直接跳到最后一页.选择跳 ...
- mysql模糊查询后分页_jsp模糊查询后的数据进行分页,但点击下一页后就查询全部的了...
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 String path = request.getContextPath(); String basePath = request.getScheme() ...
- PHPCMSv9首页显示分页点击下一页跳转链接出现错误,跳转到后台的解决方案
1 引用页写为 {pc:content action="lists" catid="10" order="updatetime DESC" ...
- Laravel8 分页样式问题
一.问题:分页样式只显示上一页和下一页,中间的页码不显示 二.查看升级文档说默认分页样式由bootstrap改为 Tailwind CSS 框架 需要修改代码 三.解决方法 1.第一种解决方法:直接修 ...
- Jquery分页之(上一页,下一页)
Jquery分页之(上一页,下一页) 在工作中我们会经常用到分页功能,除了数据库实现分页查询和调用分页插件,前端也可以实现分页查询,接下来就有我来带着大家实现一个简单的分页效果. 分页就是将将过多的结 ...
- tp3.2.3保持搜索条件的分页
一.背景 之前用tp做顶部搜索,做完之后也没注意那么多.后来测试的时候才发现,点击分页的下一页,我们之前的搜索条件就没用了..这就有点不合适了,因此开始踩坑. 我这里用的是Post方式提交的搜索条件. ...
最新文章
- 基于BCH的一些落地应用现状
- Linux之tcpdump
- 牛客网【每日一题】4月28日题目精讲 美味菜肴
- 用JavaScript中的示例进行fill()函数
- python3.7输出语句_Day3-Python-Python字符串if语句学习-2018/7/18
- 常用基础Linux操作命令总结与hadoop基础操作命令
- PartitionAssignor分析
- php充值奖励部分,BLUE引擎充值角本多充多送脚本累计充值奖励教程
- 解决vscode下载太慢的问题
- Oracle查询结果随机排序(去重,抽检)
- vue 统计中英文字符串长度_计算字符串长度以及截取字符串长度(英文占1个字符,中文汉字占2个字符)...
- 你这手写vue2.x/3.x的响应式保熟吗?
- 王石:中国楼市泡沫必破 目前只是时间问题
- 培训机构常见sql查询练习题目,你会做吗?
- python怎么设置随机数种子_python实验随机种子的设置
- html 常用标签、特殊符号
- 线上测评图形题技巧一
- 最年轻市长背后的选任悖
- 李宏毅DLHLP.14.Speech Synthesis.2/2.More than Tacotron
- 工控机和服务器哪个稳定性高,简单分析工控机和服务器有什么不同
热门文章
- C语言课后习题(14)
- mysql水平拆分 hash_常用的数据库表水平拆分方案
- aix如何查看日志策略_aix的日志的一些操作理解
- access 打印预览 代码_如何在亚银标签纸上批量打印条形码
- c语言1A,C程序设计语言1a.ppt
- base64位转成二进制流_你知道 Base64 编码中的 64 指的是什么吗?
- 精彩回顾丨2021数据库大咖讲坛(第7期)视频PPT互动问答
- 案例:Oracle 11g RAC 数据库连接数过高处理办法
- 2020年9月国产数据库流行度排行:阿里腾讯花开两朵 TiDB和达梦逐浪潮头
- 几种如何判断环境是否连上网方法,推荐最后一种