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、最终的样式:

相关推荐
古月-一个C++方向的小白35 分钟前
MySQL数据库——数据类型
android·数据库·mysql
刀法如飞1 小时前
TypeScript 数组去重的 20 种实现方式,哪一种你还不知道?
前端·javascript·算法
_风满楼2 小时前
TDD实战-会议室冲突检测的红绿重构循环
前端·javascript·算法
Rkgua2 小时前
JS中的惰性函数基本介绍
前端·javascript
张小潇2 小时前
AOSP15 WMS/AMS系统开发 - WindowManagerService finishDraw与prepareSurface流程详解
android
客场消音器2 小时前
我用两周半 Vibe Coding 做了一个前额叶训练的微信小程序
前端·javascript·后端
帅次4 小时前
Modifier 链与顺序、测量与命中区域
android·kotlin·compose·modifier
不考研当牛马5 小时前
HTML CSS 新手大全初学者必看 (含有部分 JavaScript)
javascript·css·html
卷帘依旧5 小时前
Promise链式调用原理
前端·javascript
leory5 小时前
请详细描述Handler消息机制的工作原理
android·面试