Layui表格的分页下拉框新增“全部”选项

1、首先需要从后端接口获取表格的全部数据长度,这里以100为例。

2、根据请求到的数据进行表格的渲染。示例代码:

javascript 复制代码
let pageSize = 5
let pageNo = 1
let count = 100
table.render({
    elem: 'XXX'
    ,done: function(res, curr, count){
        pageNo = curr;  // 将当前选中的页码进行赋值
        if (count <= 100) {  // 当前的总条数大于某个数值,不显示"全部"
            let optionArr = $(".layui-laypage-limits select > option")
            let optionLast = optionArr[optionArr.length -1]
            if (optionLast) { // 将下拉框的最后一个选择框的文字进行更改
                optionLast.innerHTML = '全部'
            }
        }
    }
    ,cols: [[ //标题栏
        {field: 'id',  hide: true}
       ,{field: 'name', title: '名称', align:'left'}
       ,{fixed: 'right',field: 'opt', title: '操作',width: 180,templet: 
            function(item){
                return `
                    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">
                        <i class="layui-icon layui-icon-edit"></i> 
                    </a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
                        <i class="layui-icon layui-icon-delete"></i>
                    </a>
                `
            }
        }
    ]] 
    ,data: [{
        id: 1,
        name: '名称1'
    },{
        id: 2,
        name: '名称2'
    },{
        id: 3,
        name: '名称3'
    }]
    ,skin: 'line' //表格风格
    ,even: true
   ,page: true,  // 允许分页
   limit: pageSize, // 当前下拉框选中的条数,默认是5
   limits: count > 100 ? [5, 15, 25, 50, 100] : [5, 15, 25, 50, 100,count],  // 这里很重要,一定要写,因为源码需要根据这个数据进行页数切换事件的绑定
});

3、最终的样式:

相关推荐
crmscs3 小时前
剪映永久解锁版/电脑版永久会员VIP/安卓SVIP手机永久版下载
android·智能手机·电脑
localbob3 小时前
杀戮尖塔 v6 MOD整合版(Slay the Spire)安卓+PC端免安装中文版分享 卡牌肉鸽神作!杀戮尖塔中文版,电脑和手机都能玩!杀戮尖塔.exe 杀戮尖塔.apk
android·杀戮尖塔apk·杀戮尖塔exe·游戏分享
机建狂魔3 小时前
手机秒变电影机:Blackmagic Camera + LUT滤镜包的专业级视频解决方案
android·拍照·摄影·lut滤镜·拍摄·摄像·录像
hudawei9963 小时前
flutter和Android动画的对比
android·flutter·动画
全栈前端老曹3 小时前
【MongoDB】Node.js 集成 —— Mongoose ORM、Schema 设计、Model 操作
前端·javascript·数据库·mongodb·node.js·nosql·全栈
低代码布道师4 小时前
Next.js 16 全栈实战(一):从零打造“教培管家”系统——环境与脚手架搭建
开发语言·javascript·ecmascript
一位搞嵌入式的 genius4 小时前
深入 JavaScript 函数式编程:从基础到实战(含面试题解析)
前端·javascript·函数式
choke2334 小时前
[特殊字符] Python 文件与路径操作
java·前端·javascript
lxysbly5 小时前
md模拟器安卓版带金手指2026
android
wuhen_n5 小时前
JavaScript内置数据结构
开发语言·前端·javascript·数据结构