layui父页的数据表格如何用弹窗页提交后的查询数据来更新数据表格内容？

Question

1、在tdx.php页面有一个layui数据表格：

 var myTable = table.render({
            elem: '#myTable'           
            ,limit: 15
            ,limits:[15,20,25,30]
            ,overflow: 'tips'
            ,page: true
            ,id:myTable
            

2、在tdx.php页通过table.on方式按钮触发弹窗gx_filter.php：

table.on('toolbar(myTable)', function(obj) {
            switch (obj.event) {                   
               
                case 'filter':
                  layer.open({
                  type: 2,
                  offset: 'l',
                  anim: 'slideRight', 
                  area: ['620px', '100%'],
                  shade: 0.1,
                  shadeClose: true,                        
                  title: '条件过滤：',
                  content: 'gx_filter.php',

                });
                break;

              }
            }) 

3、在弹窗页gx_filter.php通过获取所有表单值传给后端filter_schooldata.php做查询并能返回符合layui表格格式的数据：

var filter1 = layfilter.render({
        elem: '#layfilter1',
        itemWidth: 80 ,
        labelWidth: 100,
        dataSource:dataSource1,
        color: "#FF5722",
        success: (data)=>{
        },
        onChange: (status, data, dom)=>{
          console.log("filter1 is change",status,data,dom);
        }
      });
      
 //获取选中值（直接获取）
        $('#getValBtn1').click(function () {       

              $.ajax({
                      type:'POST',
                      dataType: 'json',
                      url: 'filter_schooldata.php',                           
                      data: filter1.getValue(),
                      success: function(res){
                        if (res.success === 'success') {                                 
                            layer.msg('查询成功'); 
                          } else {
                            layer.alert(JSON.stringify(filter1.getValue()))
                            }
                      },
                    })
              
                    return false;  

        });  

4、但就是无法将返回的数据更新tdx.php里数据表格，不知道怎么弄？

Answer 1

🌈🌈🌈参考通义千问和郭老师的小迷弟雅思莫了-编写提供🌈🌈🌈
您可以参考如下，如果回答的不正确，及时评论区回复我，我会根据你错误描述追加回复，直到您满意为止。

要在弹窗页gx_filter.php查询后更新tdx.php的数据表格，你需要在success回调函数中将返回的数据传递回tdx.php并重新渲染表格。这可以通过layui的layer和table API实现。以下是修改后的代码：

在gx_filter.php中，添加一个callback参数到你的AJAX请求中，并在success回调中调用这个回调：

// 在gx_filter.php中
$('#getValBtn1').click(function () {
  $.ajax({
    type: 'POST',
    dataType: 'json',
    url: 'filter_schooldata.php',
    data: filter1.getValue(),
    success: function (res) {
      if (res.success === 'success') {
        layer.closeAll(); // 关闭弹窗
        parent.layer.close(parent.layer.getFrameIndex(window.name)); // 关闭当前iframe
        parent.updateTable(res.data); // 调用父页面的更新方法，将数据传递过去
        layer.msg('查询成功');
      } else {
        layer.alert(JSON.stringify(filter1.getValue()));
      }
    },
  });
  return false;
});

然后，在tdx.php页面中，你需要创建一个updateTable函数来接收数据并重新渲染表格：

// 在tdx.php中
function updateTable(data) {
  // 清空表格数据
  table.clear(myTable);
  
  // 增加新数据
  for (var i = 0; i < data.length; i++) {
    table.insertData(myTable, i, data[i]);
  }

  // 重新加载分页
  table.reload(myTable, {
    page: {
      curr: 1 // 重载第一页
    }
  });
}

// 将updateTable函数暴露给全局
window.updateTable = updateTable;

现在，当你在gx_filter.php中查询并获取结果时，它会调用tdx.php中的updateTable函数，更新表格数据。注意，由于跨窗口通信，我们需要使用parent关键字访问tdx.php的全局作用域。