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

相关文章

使用Python实现快速搭建本地HTTP服务器

《使用Python实现快速搭建本地HTTP服务器》:本文主要介绍如何使用Python快速搭建本地HTTP服务器,轻松实现一键HTTP文件共享,同时结合二维码技术,让访问更简单,感兴趣的小伙伴可以了... 目录1. 概述2. 快速搭建 HTTP 文件共享服务2.1 核心思路2.2 代码实现2.3 代码解读3.

SpringCloud动态配置注解@RefreshScope与@Component的深度解析

《SpringCloud动态配置注解@RefreshScope与@Component的深度解析》在现代微服务架构中,动态配置管理是一个关键需求,本文将为大家介绍SpringCloud中相关的注解@Re... 目录引言1. @RefreshScope 的作用与原理1.1 什么是 @RefreshScope1.

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》:本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定

SpringBoot日志配置SLF4J和Logback的方法实现

《SpringBoot日志配置SLF4J和Logback的方法实现》日志记录是不可或缺的一部分,本文主要介绍了SpringBoot日志配置SLF4J和Logback的方法实现,文中通过示例代码介绍的非... 目录一、前言二、案例一:初识日志三、案例二:使用Lombok输出日志四、案例三:配置Logback一

springboot security快速使用示例详解

《springbootsecurity快速使用示例详解》:本文主要介绍springbootsecurity快速使用示例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝... 目录创www.chinasem.cn建spring boot项目生成脚手架配置依赖接口示例代码项目结构启用s

springboot security之前后端分离配置方式

《springbootsecurity之前后端分离配置方式》:本文主要介绍springbootsecurity之前后端分离配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的... 目录前言自定义配置认证失败自定义处理登录相关接口匿名访问前置文章总结前言spring boot secu

一文详解SpringBoot响应压缩功能的配置与优化

《一文详解SpringBoot响应压缩功能的配置与优化》SpringBoot的响应压缩功能基于智能协商机制,需同时满足很多条件,本文主要为大家详细介绍了SpringBoot响应压缩功能的配置与优化,需... 目录一、核心工作机制1.1 自动协商触发条件1.2 压缩处理流程二、配置方案详解2.1 基础YAML

springboot简单集成Security配置的教程

《springboot简单集成Security配置的教程》:本文主要介绍springboot简单集成Security配置的教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录集成Security安全框架引入依赖编写配置类WebSecurityConfig(自定义资源权限规则

SpringBoot中封装Cors自动配置方式

《SpringBoot中封装Cors自动配置方式》:本文主要介绍SpringBoot中封装Cors自动配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot封装Cors自动配置背景实现步骤1. 创建 GlobalCorsProperties

Spring Boot结成MyBatis-Plus最全配置指南

《SpringBoot结成MyBatis-Plus最全配置指南》本文主要介绍了SpringBoot结成MyBatis-Plus最全配置指南,包括依赖引入、配置数据源、Mapper扫描、基本CRUD操... 目录前言详细操作一.创建项目并引入相关依赖二.配置数据源信息三.编写相关代码查zsRArly询数据库数