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

最新推荐文章于 2022-09-27 18:58:58 发布

课文

最新推荐文章于 2022-09-27 18:58:58 发布

阅读量331

点赞数

分类专栏： layui 文章标签： javascript

本文链接：https://blog.csdn.net/u010242253/article/details/106139958

版权

layui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

方法：

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();
        },
    });
}