layer table的分页条不展示


在一个切换中。要展示三个table,但是分页不展示



后面再测试中发现

<div class="layui-form layui-border-box layui-table-view" lay-filter="LAY-table-1" style="height:531px;"><div class="layui-table-box"><div class="layui-table-header">
会生成一个高度,就是因为这个高度的原因,才导致分页不展示,我在测试的时候就是把这个去掉了。



因为这个是layer自动生成的,我到底要怎么解决呢?

百度:http://fly.layui.com/jie/14467/ 这个人跟我遇到的问题一样

在后面一个回复中有一个这个地址:http://fly.layui.com/jie/14966/ 

参考过后还是解决不了。因为我找到那个说的高度设置的源码。有可能我这边是压缩过的。所以没找到。

继续百度。后面有看到一篇文章,相同的问题,有被题主采纳的一个回答,按照他设置,成功

http://fly.layui.com/jie/14467/ 就是这篇文章

只要在调用layer table中的html中加一个内部样式就可以了

<style type="text/css">
.layui-table-page {
position:fixed;
}
</style>

问题解决


  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
可以使用 layuitable 模块中的 page 和 limit 参数来实现分页,同时使用自定义的方法来实现汇总。具体实现可以参考以下代码: // 定义表格 layui.table.render({ elem: '#demo', url: '/api/table', cols: [[ {field: 'id', title: 'ID', width: 80}, {field: 'username', title: '用户名', width: 120}, {field: 'email', title: '邮箱', minWidth: 150}, {field: 'sex', title: '性别', width: 80, sort: true}, {field: 'city', title: '城市', width: 100}, {field: 'sign', title: '签名', minWidth: 150}, {field: 'experience', title: '积分', width: 80, sort: true}, {field: 'score', title: '评分', width: 80, sort: true}, {field: 'classify', title: '职业', width: 100}, {field: 'wealth', title: '财富', width: 135, sort: true}, {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150} ]], page: true, // 开启分页 limit: 10, // 每页显示的数量 limits: [10, 20, 30, 40, 50], // 每页显示数量的选项 done: function(res, curr, count) { // 表格渲染完成后的回调函数 // 计算总积分和总评分 var totalExperience = 0; var totalScore = 0; for (var i = 0; i < res.data.length; i++) { totalExperience += res.data[i].experience; totalScore += res.data[i].score; } // 在表格底部添加汇总行 var html = '<tr><td colspan="6">总计</td><td>' + totalExperience + '</td><td>' + totalScore + '</td><td colspan="3"></td></tr>'; $('#demo').next('.layui-table-view').find('.layui-table').append(html); } }); // 定义工具栏 layui.table.on('tool(test)', function(obj){ var data = obj.data; if(obj.event === 'detail'){ layer.msg('ID:'+ data.id + ' 的查看操作'); } else if(obj.event === 'del'){ layer.confirm('真的删除行么', function(index){ obj.del(); layer.close(index); }); } else if(obj.event === 'edit'){ layer.alert('编辑行:<br>'+ JSON.stringify(data)) } }); // 定义分页 layui.laypage.render({ elem: 'pageDemo', count: 100, limit: 10, limits: [10, 20, 30, 40, 50], layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'], jump: function(obj, first){ if(!first){ layer.msg('第 '+ obj.curr +' 页'); } } }); 注意:以上代码仅供参考,具体实现需要根据实际情况进行调整。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值