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

相关推荐
Demon--hx1 天前
[C++]const成员
前端·javascript·c++
z***67771 天前
SpringBoot(7)-Swagger
android·前端·后端
apigfly1 天前
如何通过 Android 消息机制实现 Looper 的性能监控
android·性能优化·app
shepherd1261 天前
Vue-Vben-Admin 从入门到实战:后端开发的前端探索之旅
前端·javascript·vue.js
CircleMouse1 天前
介绍几个axios接口请求顺序的问题
开发语言·前端·javascript·ecmascript
雨白1 天前
Jetpack Compose 实战:复刻 Material 3 圆形波浪进度条
android·android jetpack
q***23921 天前
MySQL JSON数据类型全解析(JSON datatype and functions)
android·mysql·json
weixin_446260851 天前
Windows 安装原生安卓 App!无需模拟器,秒装谷歌商店!
android
fruge1 天前
移动端 H5 兼容问题合集:iOS 与 Android 的差异化处理
android·ios
2501_915909061 天前
iOS 上架需要什么东西?一次从准备清单到实操流程的完整技术拆解
android·macos·ios·小程序·uni-app·cocoa·iphone