layui获取table表格当前页的页码值与当前页的数据条数

最近在使用layui实现一个功能的时候,需要或得当前table表格的页码值与数据条数向后台传递参数。

在网上查了很多资料也没有解决,最后发现其实解决方案很简单,直接操作分页组件的DOM元素即可解决,具体步骤如下:

通过F12调试可以看到当前页码元素的class属性为layui-laypage-skip,分页数目为layui-laypage-limits。

即可以通过

1、 $(".layui-laypage-skip").find("input").val() //当前页码值
2、$(".layui-laypage-limits").find("option:selected").val() //分页数目

获取数据
---------------------
作者:qq_26814945
来源:CSDN
原文:https://blog.csdn.net/qq_26814945/article/details/81974068
版权声明:本文为博主原创文章,转载请附上博文链接!

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过监听 layui的分页组件的页码变化事件,当页码变化时,发送请求获取当前页数据,如果当前页没有数据,则将分页组件的页码设置为上一页,并重新发送请求获取上一页的数据。如果上一页也没有数据,则显示“无数据”提示。以下是示例代码: ```javascript // 监听分页组件的页码变化事件 layui.use(['table', 'laypage'], function(){ var table = layui.table; var laypage = layui.laypage; // 渲染表格 table.render({ // ... page: true, // ... }); // 监听分页组件的页码变化事件 laypage.on('pageChanged', function(obj){ // 发送请求获取当前页数据 $.ajax({ url: '/api/getData', data: { page: obj.curr, limit: obj.limit }, success: function(res){ // 判断当前页是否有数据 if (res.data.length > 0) { // 渲染表格 table.reload('tableId', { data: res.data, page: { curr: obj.curr } }); } else { // 当前页没有数据,回退到上一页 if (obj.curr > 1) { laypage.render({ elem: 'page', count: res.totalCount, limit: obj.limit, curr: obj.curr - 1, jump: function(obj, first){ if (!first) { // 重新发送请求获取上一页的数据 $.ajax({ url: '/api/getData', data: { page: obj.curr, limit: obj.limit }, success: function(res){ // 判断上一页是否有数据 if (res.data.length > 0) { // 渲染表格 table.reload('tableId', { data: res.data, page: { curr: obj.curr } }); } else { // 上一页也没有数据,显示“无数据”提示 table.reload('tableId', { data: [], page: { curr: obj.curr, count: 0 } }); } } }); } } }); } else { // 当前页和上一页都没有数据,显示“无数据”提示 table.reload('tableId', { data: [], page: { curr: obj.curr, count: 0 } }); } } } }); }); }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值