前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ThinkPHP6 自定义分页样式 快速配置

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

作者头像
泥豆芽儿 MT
发布2021-09-06 10:05:46
9630
发布2021-09-06 10:05:46
举报
文章被收录于专栏:木头编程 - moTzxx
  • 背景 首先,毕竟是入职新公司不久,不好改动原有的功能; 所以,鄙人的想法是指展示自己负责的页面效果,不与原有代码冲突即可 如下,相对来说是快速配置的效果,欢迎指摘 …

配置步骤

①. 页面文件的配置

  • 引入 bootstrap 公用静态文件

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

代码语言:javascript
复制
    <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 代码简要处理

  • 核心的分页代码参考如下,稍有工作经验的基本都能看懂 :
代码语言:javascript
复制
			$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 是为了后期样式优化而定义的一个类名

代码语言:javascript
复制
    <div class="div-pagination-mz">
        {$pageSize|raw}
        {$page|raw}
    </div>

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

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

代码语言:javascript
复制
.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;
}

最终效果:

附录

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021/05/06 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 配置步骤
    • ①. 页面文件的配置
      • ②. PHP 代码简要处理
        • ③. 目标 html 文件的配置
          • ④. 公用 css 代码优化一下样式:
          • 最终效果:
          • 附录
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档