数据表格在回显时的页码跳转功能

背景:在主页面加载数据表格后,跳转到指定页码,操作数据行时打开新的弹窗,关闭弹窗后,返回原界面,重新加载数据表格,并使其跳转到操作前的页码。

方法:

1.在弹窗代码段增加end参数。

layui.use('layer', function () {
                        var layer = layui.layer;
                        top.layer.open({
                            title: '确认用户关键信息',
                            type: 2,
                            content: '/BaseData/WechatUpdate',
                            area: ['350px', '440px'],
                            shade: 0,
                            resize: false,
                            end:GetUserInfo,
                        });
                    });

2.在加载表格之前保存上一次的页码,并增加首次加载时页码为空、加载后总页数变化的防呆


            var oldpage = $(".layui-laypage-skip").find("input").val();
            if (oldpage=="")
            {
                oldpage = 1;
            }

3.在加载表格时,增加id参数,绑定重载

// 加载表格
            table.render({
                elem: '#userInfo',
                data: result,
                height: $('#content').height(),
                cols: [head],
                page: true,
                id: 'testReload',
                //总页数变化的防呆
                done: function (res, curr, count) {
                    if (count % 10 == 0 && count / 10 != oldpage)
                        oldpage -= 1;
                }
            });

4.在表格加载完成后,执行重载跳转到指定页面


            table.reload('testReload', {
                page: {
                    curr: oldpage //从指定页开始
                }
            }, 'data');

以上就完成了功能需求。

以下贴出官方文档链接:

https://www.layui.com/demo/table/reload.html

以下贴出JS完整代码

var table;
$(function () {
    // 加载基础模块
    layui.use('element', function () {
        var element = layui.element;

        

        // 加载表格模块
        layui.use('table', function () {
            table = layui.table;

            // 获取用户信息
            GetUserInfo();

            // 修改删除用户
            table.on('tool(userFilter)', function (obj) {
                var data = obj.data;
                var layEvent = obj.event;
                var tr = obj.tr;

                oldpage = $(".layui-laypage-skip").find("input").val();
                if (layEvent === 'btnCheckUser') { //修改
                    window.localStorage.setItem('updateWechatUserInfo', JSON.stringify(data));
                    layui.use('layer', function () {
                        var layer = layui.layer;
                        top.layer.open({
                            title: '确认用户关键信息',
                            type: 2,
                            content: '/BaseData/WechatUpdate',
                            area: ['350px', '440px'],
                            shade: 0,
                            resize: false,
                            end:GetUserInfo,
                        });
                    });
                } else if (layEvent === 'btnDeleteUser') { //删除
                    layui.use('layer', function () {
                        var layer = layui.layer;
                        top.layer.confirm('您确定删除该用户信息吗?', { shade: 0, title: '提示' }, function (index) {
                            // 删除
                            $.ajax({
                                type: 'POST',
                                data: { 'ID': data.F_WXID },
                                datatype: 'json',
                                url: '/BaseData/DeleteWechatUser',
                                success: function (result) {
                                    alertMsg('1', '删除成功!');
                                    obj.del();
                                    top.layer.close(index);
                                }
                            });
                        });
                    });
                } 
            });
        });
    });
    // 查询用户信息
    $('#btnUserQuery').click(function () {
        // 查询条件
        GetUserInfo();
    });
});

// 获得表内容
function GetUserInfo() {
    // 表头
    var head = [];
    head.push(LayTableHead('F_WXID', '用户微信ID(自增)', '', false, '', true));
    head.push(LayTableHead('F_openId', '用户openId', '', false, '', false));
    head.push(LayTableHead('F_unionId', '用户unionId', '', false, '', false));
    head.push(LayTableHead('F_nickName', '微信昵称', '', false, '', false));
    head.push(LayTableOperate('操作', '#userBar'));

    // 请求当前分页组件信息
    var userName = "";
    var cn = "";
    var company = "";
    var dept = "";
    var str = { 'userName': userName, 'cnmae': cn, 'department': dept, 'Queryflag': Queryflag, 'company': company};

    // 开始加载
    layuiLoading();
    // 请求表格内容
    $.ajax({
        type: 'POST',
        data: str,
        datatype: 'json',
        url: '/--/--',
        success: function (result) {
            
            var oldpage = $(".layui-laypage-skip").find("input").val();
            if (oldpage=="")
            {
                oldpage = 1;
            }
            // 加载表格
            table.render({
                elem: '#userInfo',
                data: result,
                height: $('#content').height(),
                cols: [head],
                page: true,
                id: 'testReload',
                //总页数变化的防呆
                done: function (res, curr, count) {
                    if (count % 10 == 0 && count / 10 != oldpage)
                        oldpage -= 1;
            });
            table.reload('testReload', {
                page: {
                    curr: oldpage 
                }
            }, 'data');
            // 加载结束
            layuiRemoveLoading();
        },
    });
}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值