欢迎您访问我的笔记本站旨在于记录一些平时工作中遇到的一些问题和解决方法,方便查阅,部分内容来源于网络,如有侵权请联系我删除
  • 微信微信
您现在的位置是:首页 > PHP后端

tp5分页自定义-[原创]

日期:2019-09-18 16:38:46 作者:tanyi 来源:我的笔记 浏览:1188 次
很多人使用tp感觉自带的bootstrap分页看着不是很爽,于是想弄一个自己比较满意的分页,然而又不知道该如何下手。

其实要定义自己的分页也很简单,主要就是修改生成分页html代码的那个类文件。

首先去找一个自己比较满意的分页html代码(前端技术不错的也可以自己写一个),尽量找按钮是a标签的,不然跳转会很麻烦,这里我以layui社区的分页为例,这也是我网站正在使用的一个分页样式。

首先是把layui社区的样式代码弄下来,还好不是很多,核心html如下:

<div class="laypage-main">
    <span class="laypage-curr">1</span>
    <a href="/column/all/page/2/">2</a>
    <a href="/column/all/page/3/">3</a>
    <a href="/column/all/page/4/">4</a>
    <a href="/column/all/page/5/">5</a>
    <span>…</span>
    <a href="/column/all/page/1505/" class="laypage-last" title="尾页">尾页</a>
    <a href="/column/all/page/2/" class="laypage-next">下一页</a>
</div>

样式:

/* layui分页 */
.laypage-main,
.laypage-main *{box-sizing: border-box; display: inline-block; vertical-align: top;}
.laypage-main{margin: 30px 0; border: 1px solid #009E94; border-right: none; border-bottom: none; font-size: 0;}
.laypage-main *{margin: -1px; padding: 0 20px; line-height: 36px; border-right: 1px solid #009E94; border-bottom: 1px solid #009E94; font-size: 14px;}
.laypage-main .laypage-curr{background-color:#009E94; color: #fff;}

有了这些基础的东西就好办了,

将原来的Bootstrap分页驱动文件复制一份,命名为Layui,当然这个名字不固定,你可以改成你自己喜欢的,到时配置分页type的时候写这个名字进去就好。

然后进入到文件修改类名称后,去找到需要修改的地方,比如上一页下一页这两个按钮,我用上一页这个按钮举例:

image.png

箭头所指的这些方法就是最终去生成分页html的方法,追踪到最后执行的方法,假如最后执行的是getDisabledTextWrapper这个方法,我们找到这个方法可以看到生成的是一个li标签,并且是不可点击的。

image.png

而我们现在不可点击按钮只是一个span标签,所以我们直接改成这样:

image.png

其他按钮同理,改完之后最终渲染分页执行sprintf的时候注意占位符的数量,比如你要定制一个首页按钮,可能就会多一个占位符,完整文件我已经放在云盘的,喜欢的朋友可以拿去用。

下载链接:Layui样式分页

提取码:gt9v


原创文章转载时请注明原始出处,作者等相关信息

提交评论
评论列表