layui分页样式改变

最新推荐文章于 2024-05-06 14:03:08 发布
最新推荐文章于 2024-05-06 14:03:08 发布
阅读量7.4k 收藏 9
点赞数
分类专栏： layui分页样式 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cxy_12345/article/details/104013897
版权

layui分页的原始样式：

修改成如下样式：

新增css代码如下：（pageBox为放置分页的容器id）

/*修改layui分页的样式*/
#pageBox .layui-laypage a{
    color: #94999F;
    font-size: 12px;
}
#pageBox .layui-laypage em{
     font-size: 12px;
}

.layui-laypage .layui-laypage-spr{
    margin-right: 5px;
}
#pageBox .layui-laypage a{
    margin-right: 5px;
}
#pageBox .layui-laypage-curr{
    margin-right: 5px;
}
.layui-laypage-prev,.layui-laypage-next{
    font-family: "fontello";
}
#pageBox .layui-laypage .layui-laypage-curr .layui-laypage-em{

最低0.47元/天 解锁文章
cxy_12345
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
layui-laypage模块代码详解
weixin_30390075的博客
10-06 640
/** layui-v2.4.0 MIT License By https://www.layui.com */;layui.define(function(e) { "use strict"; var a = document, t = "getElementById", n = "getElementsByTagName", i = "la...
ThinkPHP6+Layui自定义分页样式
骜蛟的博客
01-28 2311
有些时候框架自带的分页并不能满足项目的需求，这时自定义分页样式就是首选了。此篇文章记录ThinkPHP6+Layui自定义分页样式的基础使用。 关于layui分页样式，自己到layui官方文档寻找自己喜欢的样式。 第一步：复制ThinkPHP6分页代码 找到ThinkPHP6分页代码到所需要的位置， // ThinkPHP6分页代码位置 // vendor\topthink\think-orm\src\paginator\driver\Bootstrap.php 复制到Bootstrap.php到所需要的
layui表格刷新当前分页
qq_42657934的博客
06-21 1988
layui表格刷新分页中当前页 //#reload刷新按钮的id $("#reload").on('click',function(){ // policy是表格的id属性 table.reload('policy', { //方法渲染表格里的属性 ID page: { curr: $(".layui-laypage-em").next().html() //主要代码行 }, where:{这里可以向后台上传值,列入查询关键字} }); }) ...
thinkphp6使用layui分页组件做分页效果
qq_40649432的博客
05-06 380
博主用的是layui2.9.8的版本，但这个版本的分页组件是动态效果的，但我需要的是静态分页，所以我自己封装了一个生成layui的分页代码生成代码。代码如下：
layui框架学习（32：分页模块）
gc_2299的博客
07-22 1458
学习并记录layui框架中内置模块的分页模块的函数、参数设置方式。
layui table 2种分页
柠檬酸
08-23 1226
第一种 <script type="text/javascript" src="js/common/jquery-1.10.2.min.js"></script> <script src="https://www.layuicdn.com/layui-v2.5.5/layui.js" charset="utf-8"></script> <table class="layui-table" id="ceshi"> <thead&
layui可编辑表格新增、保存、删除操作以及注意事项
热门推荐
Edward·Che的博客
10-11 1万+
Layui一直是本小编使用的前端，因为使用方便可操作性强外观美观，让后端全栈的小编感觉很巴适。总结使人进步，那么现在我就直接撒干货了。这篇博文分两部分吧，显示总结性的讲解一下，然后小编会在第二部分把源码直接粘出来与大家共享，一是方便以后自己用了可以直接拿过来用，二是方便有困难的小伙伴直接粘贴一个demo来根据自己的需求改进。这篇文章会直接吧可编辑列表的新增一行、删除、更新以及查询都...
layui中的三种分页方式
dancheng1的博客
01-17 6320
在使用下面代码前，需要先引入layui的css和js文件 Insert title here 开门见山 ： 默认分页 开启 URL hash 是时候看一下完整功能了！ layui.use(['laypage', 'layer'], function(){ var laypage =
layui的自定义page
小刘的博客
12-27 3926
一：前端页面使用laypage <div id="demo20" align="center" style="margin-top: 20px;"></div> let totalCount = 0; getPageData(1, 6); function getPageData(page, limit) { ...
thinkphp5+layui实现的分页样式示例
01-20
本文实例讲述了thinkphp5+layui实现的分页样式。分享给大家供大家参考，具体如下： tp5之layui分页样式 1.分页类 路径：\thinkphp\library\think\paginator\driver Layui.php <?php namespace think\paginator\driver; use think\Paginator; class Layui extends Paginator { /** * 上一页按钮 * @param string $text * @return string */ protected funct
layui中table表头样式修改方法
12-10
如下所示： layui.use('table', function () { var table = layui.table; table.render({ elem: '#desTable' ... layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局 //
Layui实现下拉多选
最新发布
06-04
7. **Style自定义样式**：除了整体主题，Layui还支持对组件的个别元素进行样式定制，比如改变选中项的背景色，设置边框等，使得设计更加个性化。 在提供的文件中，“Layui中实现下拉多选功能.docx”可能是详细的...
layui开发文档2.5.6.7z
10-13
3. 自定义主题：layui允许开发者自定义皮肤，改变颜色、字体等样式，打造个性化界面。 4. 图标库：layui内置了大量矢量图标，覆盖常用操作和状态，便于页面美化。 五、layui开发流程 1. 引入layui资源：在HTML中...
layui后台管理页面
04-25
layui允许开发者自定义皮肤，通过修改CSS变量或使用layui提供的主题生成工具，可以轻松改变整个后台管理页面的视觉风格，满足个性化需求。 综上所述，这个“layui后台管理页面”项目展示了如何利用layui框架构建一...
layui2.2.5离线文档下载.zip
10-19
12. **自定义主题**：layui允许开发者自定义主题，改变框架的颜色和样式，以适应不同项目的需求。 13. **扩展性**：layui允许开发者扩展新的模块，进一步增强其功能。 离线文档详细解释了以上所有知识点，并通过...
layui table 实现分页
wenxuanyue的博客
06-08 7184
Layui是一款免费，开源，轻量级的前端cms框架，适用于企业后端,能快速上手开发，集成了常用的组件，还有完善的文档和社区。 之前写一个一个关于数据的table表格显示 并带有分页功能，实现过程遇到了很多问题，现抽空总结一下。 使用之前请先详细阅读layer的文档：http://www.layui.com/doc/modules/layer.html 首先下载最新版的layui文件： 下载完之后引入到自己的项目中，放在根目录的下面某一个地方： 然后在你要用的jsp页面上引入相应的js和cs
使用Layui实现自定义样式下的条件分页
如何使用intellij Idea实现项目的热部署？
03-19 3020
看懂此文需要一定的layui基础，用了layui也有一年多了，因为工作的原因，前端代码很少写，以前经常是用layui做后台管理系统，所以分页都是用Layui封装好的表格。分页查询也很快捷。 以前的layui表格分页查询： ...
Layui快速入门之第十四节 分页
qq_61313896的博客
09-18 2645
Layui快速入门之第十四节 分页
layui 分页表格
05-31
好的，关于 layui 分页表格，您需要在页面引入 layui 的相关文件，然后通过 layui 的表格和分页模块实现。您可以参考以下代码示例： ```html <!-- 引入 layui 相关文件 --> <link rel="stylesheet" href="/layui/css/layui.css"> <script src="/layui/layui.js"></script> <!-- 在页面中添加一个表格容器 --> <table id="table" lay-filter="table"></table> <!-- 在 JavaScript 中配置表格和分页模块 --> <script> layui.use(['table', 'laypage'], function(){ var table = layui.table; var laypage = layui.laypage; // 配置表格数据和列信息 table.render({ elem: '#table', url: '/api/data', cols: [[ {field: 'id', title: 'ID', width: 80}, {field: 'name', title: '姓名', width: 120}, {field: 'age', title: '年龄', width: 80}, {field: 'gender', title: '性别', width: 80}, {field: 'address', title: '地址', width: 200}, {field: 'phone', title: '电话', width: 120} ]], page: true, limit: 10 }); // 配置分页 laypage.render({ elem: 'page', count: 100, limit: 10, layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'], jump: function(obj, first){ // obj包含当前分页的所有参数，如： // { // curr: 1, // 当前页码 // limit: 10, // 每页显示的条数 // ... // } // first表示是否首次渲染分页 if(!first){ // 非首次渲染分页时，重新加载表格数据 table.reload('table', { where: { page: obj.curr, limit: obj.limit } }); } } }); }); </script> ``` 在上面的代码中，我们首先引入了 layui 的相关文件，然后在页面中添加了一个表格容器。接着，在 JavaScript 中配置了表格数据和列信息，并启用了分页功能。最后，我们使用 layui 的分页模块来渲染分页，并在分页回调函数中重新加载表格数据。 需要注意的是，上面的代码只是一个示例，具体的实现方式可能会根据您的需求而有所不同。您可以根据自己的实际情况进行调整和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值