layui动态添加table数据但是新添加的数据一直渲染不出来..

有没有人出现过我这种问题啊，动态添加table数据但是新添加的数据一直渲染不出来的啊。有没有好人能赐教一下😭

父页面

img

子页面

img

js代码

layui.use(['table', 'form', 'jquery', 'layer'], function () {
            let table = layui.table;
            let $ = layui.jquery;
            let layer = layui.layer;
            let tableData = [];
            $.ajax({
                url: '../../admin/data/stuInfo.json'
                , type: "get"
                , dataType: "json"
                , success: function (result) {
                    tableData = result.data;
                    table.render({
                        elem: '#stu-table-all',
                        toolbar: '#stu-toolbar',
                        defaultToolbar: [],
                        skin: 'line',
                        page: true,
                        cols: [
                            [
                                { type: 'checkbox' },
                                { field: 'id', title: '学号', width: '20%', align: 'center' },
                                { field: 'stuName', title: '学生姓名', width: '20%', align: 'center' },
                                { field: 'college', title: '所属院系', width: '20%', align: 'center' },
                                { field: 'class', title: '年级', width: '20%', align: 'center' },
                            ]
                        ],
                        data: tableData
                    });

                }
            });

            $(".addBtn").on("click", function () {
                var oldData = parent.layui.table.cache["stu-table-choose"];
                console.log("old  " + JSON.stringify(oldData));
                //打印父页面的table信息
                var checkStatus = table.checkStatus('stu-table-all');
                var newData = checkStatus.data;
                console.log("new   " + JSON.stringify(newData));
                //打印子页面被选中行的信息
                for (let i = 0; i < newData.length; i++) {
                    oldData.push(newData[i]);
                }
                console.log("reload   " + JSON.stringify(oldData));
                //打印重组的table信息
                parent.layui.table.reload('stu-table-choose',
                    {
                        data: oldData
                    })
            })
        })

打印台结果：

img

layui的js引入了吗

从你的代码片段中，我注意到你已经成功的获取了新添加的数据，并尝试将其添加到oldData数组中。然而，你并没有使用这个新的oldData数组重新渲染表格，这可能是你无法看到新添加数据的原因。

在layui中，如果你需要更新表格的数据，可以使用table.reload方法。首先，你需要确保你的表格实例是存在的，然后你可以使用table.reload方法更新数据。

以下是一个示例代码：

// 假设你的表格实例是tableIns
var tableIns = table.render({
    elem: '#stu-table-all',
    toolbar: '#stu-toolbar',
    defaultToolbar: [],
    skin: 'line',
    page: true,
    cols: [
        [
            { type: 'checkbox' },
            { field: 'id', title: '学号', width: '20%', align: 'center' },
            { field: 'stuName', title: '学生姓名', width: '20%', align: 'center' },
            { field: 'college', title: '所属院系', width: '20%', align: 'center' },
            { field: 'class', title: '年级', width: '20%', align: 'center' },
        ]
    ],
    data: tableData
});

$(".addBtn").on("click", function () {
    var oldData = parent.layui.table.cache["stu-table-choose"];
    console.log("old  " + JSON.stringify(oldData));
    //打印父页面的table信息
    var checkStatus = table.checkStatus('stu-table-all');
    var newData = checkStatus.data;
    console.log("new   " + JSON.stringify(newData));
    //打印子页面被选中行的信息
    for (let i = 0; i < newData.length; i++) {
        oldData.push(newData[i]);
    }
    console.log("reload   " + JSON.stringify(oldData));
    
    // 使用reload方法更新表格数据
    tableIns.reload({
        data: oldData // 这里使用新的数据数组
    });
});

在上述代码中，我假设你的表格实例是tableIns，你可能需要根据你的实际代码调整这个变量名。在tableIns.reload方法中，我传入了新的数据数组oldData，这将导致表格使用新的数据进行渲染。

你不需要ajax调用，table对象可以自动获取数据。

table.render({
    elem: '#stu-table-all',
    url: '../../admin/data/stuInfo.json', //
    toolbar: '#stu-toolbar',
    defaultToolbar: [],
    skin: 'line',
    page: true,
    cols: [[
        { type: 'checkbox' },
        { field: 'id', title: '学号', width: '20%', align: 'center' },
        { field: 'stuName', title: '学生姓名', width: '20%', align: 'center' },
        { field: 'college', title: '所属院系', width: '20%', align: 'center' },
        { field: 'class', title: '年级', width: '20%', align: 'center' },
    ]],
    //data: tableData
});

【以下回答由 GPT 生成】

问题解决方案

您可以尝试以下步骤解决该问题：

  1. 首先，检查是否正确引入了Layui的table组件、form组件、jquery库和layer组件。确保代码中的依赖项正确导入。

示例代码：

<link rel="stylesheet" href="path/to/layui/css/layui.css">
<script src="path/to/jquery.js"></script>
<script src="path/to/layui/layui.js"></script>
  1. 确保您的数据源地址（../../admin/data/stuInfo.json）正确，可以通过在浏览器中直接访问该地址来验证是否能够获取到数据。

示例代码：

$.ajax({
  url: '../../admin/data/stuInfo.json',
  success: function(result) {
    console.log(result); // 确认获取到的数据是否正确
  },
  error: function() {
    console.log('无法获取数据，请检查数据源地址！');
  }
});
  1. 检查从数据源获取的数据是否正确地赋值给了tableData变量。您可以在success回调函数中添加console.log(result.data)语句来确认获取到的数据是否正确。

示例代码：

var tableData;
$.ajax({
  url: '../../admin/data/stuInfo.json',
  success: function(result) {
    tableData = result.data;
    console.log(tableData); // 确认数据是否正确赋值给tableData变量
  },
  error: function() {
    console.log('无法获取数据，请检查数据源地址！');
  }
});
  1. 确保在table.render函数中的elem参数正确指向了您的表格容器。您可以检查HTML代码中是否有id为"stu-table-all"的元素，并确认该元素是table容器。

示例代码：

<table id="stu-table-all"></table>
  1. 检查cols参数数组中的列配置项是否正确，确保每个列都有正确的field、title、width和align属性。

示例代码：

var cols = [
  {field: 'id', title: 'ID', width: 80, align: 'center'},
  {field: 'name', title: '姓名', width: 120, align: 'center'},
  {field: 'age', title: '年龄', width: 80, align: 'center'}
];
  1. 确保页面中已经正确引入了Layui的CSS样式文件，这是Layui组件正确渲染的必要条件。

示例代码：

<link rel="stylesheet" href="path/to/layui/css/layui.css">

如果您按照以上步骤进行检查和调试，问题仍然存在，请您提供更详细的代码和错误信息，以便我们能够更好地帮助您解决问题。



【相关推荐】



如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^