其实要定义自己的分页也很简单,主要就是修改生成分页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的时候写这个名字进去就好。
然后进入到文件修改类名称后,去找到需要修改的地方,比如上一页下一页这两个按钮,我用上一页这个按钮举例:
箭头所指的这些方法就是最终去生成分页html的方法,追踪到最后执行的方法,假如最后执行的是getDisabledTextWrapper这个方法,我们找到这个方法可以看到生成的是一个li标签,并且是不可点击的。
而我们现在不可点击按钮只是一个span标签,所以我们直接改成这样:
其他按钮同理,改完之后最终渲染分页执行sprintf的时候注意占位符的数量,比如你要定制一个首页按钮,可能就会多一个占位符,完整文件我已经放在云盘的,喜欢的朋友可以拿去用。
下载链接:Layui样式分页
提取码:gt9v