首页 > 其他分享 >获取layui表格(table)当前页的页码值和当前页的数据条数

获取layui表格(table)当前页的页码值和当前页的数据条数

时间:2024-04-15 15:11:06浏览次数:29  
标签:field val title layui 当前页 条数 width

获取layui表格(table)当前页的页码值和当前页的数据条数

在浏览器查看源码,获取当前页面的数据条数如下


核心代码

$(".layui-laypage-limits").find("option:selected").val() //分页数目 
$(".layui-laypage-skip").find("input").val() //当前页码值
//转载请保留原创地址 http://www.luofenming.com/show.aspx?id=ART2022010200001

下面是我项目中把加载数据封装到了一个方法里面

var currNum = 1;
if (localStorage.getItem("layuiPageSize") == null) {
    localStorage.setItem("layuiPageSize", 20);//添加每页默认数据条数
}
function LoadData(currIndex) {
    //执行一个 table 实例
    table.render({
        elem: '#demo'
        // , height: 620
        , method: 'get'
        , url: '../api/User/AlipayData2' //数据接口
        , request: {
            pageName: 'PageIndex', // page
            limitName: 'PageSize' // limit
        }
        , title: '用户表'
        , page: {
            limit: localStorage.getItem("layuiPageSize")//默认每页多少条
            , limits: [20, 30, 50, 100, 200, 300, 500, 1000]//选择  显示每页多少条
            , curr: currIndex
            //, first: '首页'
            //,last: '尾页'
        } //开启分页
        , where: { UserName: $("#UserName").val(), OrderId: $("#OrderId").val(), State: $("#State").val() }
        , toolbar: 'default' //开启工具栏,此处显示默认图标,可以自定义模板,详见文档
        , totalRow: true //开启合计行
        , cols: [[ //表头
            { type: 'checkbox', fixed: 'left' }
            , { field: 'UserName', title: '用户名', width: 100 }
            , { field: 'money', title: '金额', width: 80, sort: true, totalRow: true }
            , { field: 'orderid', title: '订单号', width: 210, sort: true }
            , { field: 'orderTime', title: '创建时间', width: 165 }
            , { field: 'state', title: '状态', width: 80 }
            , { field: 'subject', title: 'subject', width: 160 }
            , { field: 'body', title: 'body' }
        ]]
        , done: function (obj, first) {
            let pageSize = $(".layui-laypage-limits").find("option:selected").val();
            localStorage.setItem("layuiPageSize", pageSize);//添加数据
            currNum = first;
            if (obj.msg == '无数据' && first > 1) {
                currNum = first - 1;
                LoadData(currNum);
            }
            $("[data-field='state']").children().each(function () {
                //若选取元素为1 显示表格里面显示已支付
                if ($(this).text() == '1') {
                    $(this).text('已支付');
                    //若选取元素为0 表格里面显示未支付
                } else if ($(this).text() == '0') {
                    $(this).text('未支付');
                }
                else if ($(this).text() == '2') {
                    $(this).text('已结算');
                }
            });
        }
    });
}
//转载请保留原创地址 http://www.luofenming.com/show.aspx?id=ART2022010200001

标签:field,val,title,layui,当前页,条数,width
From: https://www.cnblogs.com/HeroZhang/p/18136021

相关文章

  • layUI Table自定义工具栏和搜索参数
    layUITable自定义工具栏和搜索参数视频讲解地址https://www.bilibili.com/video/BV1P94y197nNHTML代码<divclass="container-fluid"><tableclass="layui-hide"id="test"lay-filter="test"></table></div><s......
  • layUI layer弹框按钮 : 确认,取消,关闭事件
    layUIlayer弹框按钮:确认,取消,关闭事件layer.open({title:'头信息',btn:['确认','取消','按钮3'],//多个按钮直接用btn1/btn2/btn3...回调area:['85%','95%'],content:"<divstyle='font-size:15px......
  • 淘宝二面:MySQL里有2000万条数据,但是Redis中只存20万的数据,如何保证redis中的数据都是
    引言在当今互联网领域,尤其在大型电商平台如淘宝这样的复杂分布式系统中,数据的高效管理和快速访问至关重要。面对数以千万计的商品、交易记录以及其他各类业务数据,如何在MySQL等传统关系型数据库之外,借助内存数据库Redis的力量,对部分高频访问数据进行高效的缓存处理,是提升整个系统......
  • 关于Layui的多层级的下拉选项Select使用教程
    案例代码<selectname="parentSelect"lay-filter="parentSelect"><optionvalue="">请选择父级选项</option><optionvalue="1">父级选项1</option>......
  • 基于SSM+MySql+Layui的在线教育视频课程管理系统(附论文)
    演示视频基于SSM+MySql+Layui的在线教育视频课程管理系统(附论文)-源码乐园技术描述开发工具:Idea/Eclipse数据库:mysqlJar包仓库:Maven前段框架:LayUI后端框架:Spring+SpringMVC+Mybatis+MySQL文字描述基于SSM+MySql+Layui的在线教育视频课程管理系统,分为用......
  • java stream流 获取最后一条数据
    JavaStream流获取最后一条数据在Java中,Stream是一种用于处理集合数据的抽象概念。Stream提供了一种函数式编程的方式来操作数据,可以通过一系列的操作来处理集合中的元素。本文将介绍如何使用JavaStream流获取最后一条数据。什么是JavaStream流JavaStream是Java8中引入的一......
  • c# 在10万条数据中判断是否存在很慢问题
     在C#中,使用List<T>.Where查询10万条数据是否存在会很慢,因为这会导致线性搜索,时间复杂度为O(n)。如果数据集很大,你应该使用更高效的数据结构,如HashSet<T>,它提供了O(1)的插入和查找操作。usingSystem;usingSystem.Collections.Generic;usingSystem.Diagnostics;classP......
  • 关于layui的单图片上传遇坑-field-input-name问题解决
    直接上代码注意field:'ymftimage'layui.use(function(){varupload=layui.upload;varlayer=layui.layer;varelement=layui.element;var$=layui.$;//单图片上传varuploadInst=upload.render({elem:'#ID-upload-demo-btn',......
  • 关于LayuiAdmin单页版 点击 生成新的 tab标签页
    挠头一小时,解决一秒钟直接上代码html<buttonclass="layui-btnlayuiadmin-btn-useradmin"id="openNewTabBtn">添加</button>js layui.use(['element','table','jquery'],function(){ var$=layui.$ var......
  • layui多选xm-select
    直接上代码xm-select.js下载地址https://pan.baidu.com/s/1YXDsr9tn8EOeX0vEzPwGdQ?pwd=nvdv提取码:nvdv第一步:下载第二步:引入xm-select.js第三步:写一个`<divid="demo1"></div>`第四步:渲染 vardemo1=xmSelect.render({ el:'#demo1', language:'......