layui table 分页 上一页 : 下一页 回调

layui table 分页回调 上一页 : 下一页 回调
学习类的文章,因为最近需要用到这个,所以作为学习记录一下

回调的参数是 done

table.render({
                elem: '#main',
                width: 900,
                url: '/api/get', //数据接口
                title: '信息表',
                id: 'main',
                limit: 10, //初始化的数据数量
                page: true, //开启分页
                cols: [[
                    { field: 'name', title: '名称', width: 300, sort: true }
                ]],
                done: function (obj, first) {
                	//切换分页时候回调事件
                	console.log(obj);
                	console.log(first);
                    if (first != 1) {
                        //第一次进入不调用
                    }
                }
            });

分页控件回调

欢迎进qq群交流:704028989

以下是一个使用 layui 实现自定义分页的例子: HTML 代码: ```html <div class="layui-table-page"> <div class="layui-box layui-laypage layui-laypage-default"> <a class="layui-laypage-prev layui-disabled" href="javascript:;" data-page="0">上一页</a> <span class="layui-laypage-curr"><em class="layui-laypage-em"></em>1</span> <a class="layui-laypage-next" href="javascript:;" data-page="2">下一页</a> <span class="layui-laypage-skip">到第<input type="text" min="1" value="1" class="layui-input">页<button class="layui-laypage-btn">确定</button></span> <span class="layui-laypage-total">共 100 条</span> </div> </div> ``` JavaScript 代码: ```javascript layui.use(['layer', 'laypage'], function(){ var layer = layui.layer; var laypage = layui.laypage; laypage.render({ elem: '.layui-table-page', count: 100, limit: 10, prev: '<a class="layui-laypage-prev" href="javascript:;" data-page="{{prev}}">上一页</a>', next: '<a class="layui-laypage-next" href="javascript:;" data-page="{{next}}">下一页</a>', layout: ['prev', 'page', 'next', 'skip', 'total'], jump: function(obj, first){ if(!first){ // 在这里编写分页的 AJAX 请求代码 layer.msg('第 '+ obj.curr +' 页'); } } }); }); ``` 在上面的例子中,我们首先定义了一个包含分页元素的 HTML 结构,并在 JavaScript 中使用 layui.laypage.render() 方法进行分页的渲染。 其中,我们可以通过设置 `count` 属性来指定总条目数,通过设置 `limit` 属性来指定每页显示的条目数,通过设置 `prev` 和 `next` 属性来指定上一页和下一页的 HTML 元素,通过设置 `layout` 属性来指定分页布局,通过设置 `jump` 属性来指定分页跳转时的回调函数。 在 `jump` 回调函数中,我们可以编写分页的 AJAX 请求代码,并使用 `layer.msg()` 方法来提示当前页码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

盗理者

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值