当前位置: 首页 > article >正文

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

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

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

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

在这里插入图片描述


http://www.kler.cn/a/414863.html

相关文章:

  • 【Maven】项目创建
  • Vue构建错误解决:(error TS6133)xxx is declared but its value is never read.
  • 微信小程序蓝牙writeBLECharacteristicValue写入数据返回成功后,实际硬件内信息查询未存储?
  • 火山引擎VeDI在AI+BI领域的演进与实践
  • 《Vue 数据绑定:开启动态页面之旅》
  • 计算机网络知识点极简总结
  • Ardupilot开源无人机之Geek SDK讨论
  • Android NDK开发 JNI 基础
  • Pump Science平台深度剖析:兴起、优势、影响与未来
  • heapq模块常用方法
  • Qt常用控件之显示类控件
  • go语言去除字符串末尾的特定字符
  • Java项目实战II基于SPringBoot的玩具销售商城管理系统(开发文档+数据库+源码)
  • Ajax入门程序
  • Python基础学习-12匿名函数lambda和map、filter
  • 【数据分析】一、pandas数据处理指南:100个基于pandas数据预处理方法
  • Leetcode494. 目标和(HOT100)
  • 【已解决】git push需要输入用户名和密码问题
  • MySQL:常用数据类型
  • 【数据结构】ArrayList与顺序表
  • # 18_ Python基础到实战一飞冲天(二)-python基础(十八)--元组
  • 尚硅谷学习笔记——Java设计模式(一)设计模式七大原则
  • mac 如何查看 export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node 是否正确
  • Modern Effective C++ item 15:尽可能的使用constexpr
  • 【GIT】TortoiseGit的拉取(Pull) 和 获取(Fetch)
  • 机器学习在教育方面的应用文献综述