ThinkPHP6 自定义分页样式 快速配置

2024-06-07 17:08

本文主要是介绍ThinkPHP6 自定义分页样式 快速配置,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

  • 背景
    首先,毕竟是入职新公司不久,不好改动原有的功能;
    所以,鄙人的想法是指展示自己负责的页面效果,不与原有代码冲突即可
    如下,相对来说是快速配置的效果,欢迎指摘 …

配置步骤

①. 页面文件的配置

  • 引入 bootstrap 公用静态文件

建议可以下载到自己的框架中,以免后期人家服务器停止服务

    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"><script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

②. PHP 代码简要处理

  • 核心的分页代码参考如下,稍有工作经验的基本都能看懂 :
			$this->pageSize = 2;$list = ExcelProcess::getProcessList($this->pageSize);$view = ['pageSize' => page_size($this->pageSize, $list->total()),'page' => $list->render(),'list' => $list,'empty' => empty_list(18),];return view('import', $view);

③. 目标 html 文件的配置

  • 哪个页面需要显示 分页效果,就在其中编写如下代码

div-pagination-mz 是为了后期样式优化而定义的一个类名

    <div class="div-pagination-mz">{$pageSize|raw}{$page|raw}</div>

④. 公用 css 代码优化一下样式:

此处,是为了后期的样式优化,可自行补充

.div-pagination-mz{margin-top: 5px;margin-left: 10px;
}
.div-pagination-mz .page_total {float: left;width: auto;margin-top: 20px;margin-right: 3px;
}
.div-pagination-mz .pagination span{font-weight: bold;
}
.div-pagination-mz .pagination .active span{background-color: #1b7e5a;border-color:#1b7e5a;
}

最终效果:

附录

  • 如果是新做的项目,建议参考下面的文章,进行样式的修改,鄙人认为layui 效果很不错的!

  • 参考文章:
    【ThinkPHP6.0完全开发手册-分页】
    【ThinkPHP6+Layui自定义分页样式】

这篇关于ThinkPHP6 自定义分页样式 快速配置的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1039781

相关文章

SpringBoot中HTTP连接池的配置与优化

《SpringBoot中HTTP连接池的配置与优化》这篇文章主要为大家详细介绍了SpringBoot中HTTP连接池的配置与优化的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一... 目录一、HTTP连接池的核心价值二、Spring Boot集成方案方案1:Apache HttpCl

CSS3 布局样式及其应用举例

《CSS3布局样式及其应用举例》CSS3的布局特性为前端开发者提供了无限可能,无论是Flexbox的一维布局还是Grid的二维布局,它们都能够帮助开发者以更清晰、简洁的方式实现复杂的网页布局,本文给... 目录深入探讨 css3 布局样式及其应用引言一、CSS布局的历史与发展1.1 早期布局的局限性1.2

使用animation.css库快速实现CSS3旋转动画效果

《使用animation.css库快速实现CSS3旋转动画效果》随着Web技术的不断发展,动画效果已经成为了网页设计中不可或缺的一部分,本文将深入探讨animation.css的工作原理,如何使用以及... 目录1. css3动画技术简介2. animation.css库介绍2.1 animation.cs

Maven 插件配置分层架构深度解析

《Maven插件配置分层架构深度解析》:本文主要介绍Maven插件配置分层架构深度解析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录Maven 插件配置分层架构深度解析引言:当构建逻辑遇上复杂配置第一章 Maven插件配置的三重境界1.1 插件配置的拓扑

Spring Boot集成Logback终极指南之从基础到高级配置实战指南

《SpringBoot集成Logback终极指南之从基础到高级配置实战指南》Logback是一个可靠、通用且快速的Java日志框架,作为Log4j的继承者,由Log4j创始人设计,:本文主要介绍... 目录一、Logback简介与Spring Boot集成基础1.1 Logback是什么?1.2 Sprin

SpringBoot快速搭建TCP服务端和客户端全过程

《SpringBoot快速搭建TCP服务端和客户端全过程》:本文主要介绍SpringBoot快速搭建TCP服务端和客户端全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录TCPServerTCPClient总结由于工作需要,研究了SpringBoot搭建TCP通信的过程

VSCode中配置node.js的实现示例

《VSCode中配置node.js的实现示例》本文主要介绍了VSCode中配置node.js的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着... 目录一.node.js下载安装教程二.配置npm三.配置环境变量四.VSCode配置五.心得一.no

Gradle在国内配置镜像加速的实现步骤

《Gradle在国内配置镜像加速的实现步骤》在国内使用Gradle构建项目时,最大的痛点就是依赖下载贼慢,甚至卡死,下面教你如何配置国内镜像加速Gradle下载依赖,主要是通过改写repositori... 目录引言一、修改 build.gradle 或 settings.gradle 的 reposito

使用easy connect之后,maven无法使用,原来需要配置-Djava.net.preferIPv4Stack=true问题

《使用easyconnect之后,maven无法使用,原来需要配置-Djava.net.preferIPv4Stack=true问题》:本文主要介绍使用easyconnect之后,maven无法... 目录使用easGWowCy connect之后,maven无法使用,原来需要配置-DJava.net.pr

史上最全nginx详细参数配置

《史上最全nginx详细参数配置》Nginx是一个轻量级高性能的HTTP和反向代理服务器,同时也是一个通用代理服务器(TCP/UDP/IMAP/POP3/SMTP),最初由俄罗斯人IgorSyso... 目录基本命令默认配置搭建站点根据文件类型设置过期时间禁止文件缓存防盗链静态文件压缩指定定错误页面跨域问题