刷新数据表而不重新加载页面

Posted

技术标签:

【中文标题】刷新数据表而不重新加载页面【英文标题】:Refresh DataTable without reloading page 【发布时间】:2021-01-07 14:17:55 【问题描述】:

我正在尝试重新加载已插入选项卡的数据表。

请参考问题:AJAX Update DataTable after On Success

一个 php 类 userX.php 有 3 个带有客户端实现的数据表。我可以使用按钮更改第一个表的一行,一旦完成,记录将转到选项卡 2 -> 并且它的内容是表 2。我现在正在使用 AJAX 更改状态:

  $(".changeStatus").click(function(event)
      if(confirm("Are you sure changing status?"))
        event.preventDefault();
        var status =  "In Production";
        var id = $(this).attr('data-id');
        $.ajax(
          url     : 'dbo.php',
          method  : 'POST',
          data    : status : status , id : id,
          success : function(data)
            $('tr#'+id+'').css('background-color', '#ccc');
            $('tr#'+id+'').fadeOut('slow');
          
        );
      
      else
        return false;
      
    );

与此同时,它也必须在选项卡 2 表中进行更新。我尝试使用 div 内容来实现这一点;他们似乎都没有工作。我错过了什么?我愿意接受建议。

【问题讨论】:

【参考方案1】:

表可以通过重新初始化数据表的方法简单地重新加载,也可以通过其内置的 AJAX 重新加载它。下面的代码块会有所帮助。

             $(document).on('click','#ChangeNext',function(event)
                if(confirm("Are you sure changing status?"))
                    event.preventDefault();
                    var statusid = $(this).attr('data-id');
                    $.ajax(
                        url     : 'dbo.php',
                        method  : 'POST',
                        data    : statusid : statusid,
                        success : function(data)
                        
                            $('#exampleone').DataTable().ajax.reload();
                        
                    );
                
                else
                    return false;
                
            );

【讨论】:

【参考方案2】:

使用 ajax 请求将数据放入 DataTables 的最佳方式是 DataTables ajax api,您可以在以下链接中看到它:

DataTables Ajax sourced data

jQuery 示例:

jQuery('.changeStatus').click(function(event)
    $('#example').DataTable( ajax: 'data.json' );
);

JSON 示例:


    "data": [
        [
            "Roshan Zaid",
            "*** user",
            "New member"
        ],
        [
            "AmirAli Esteki",
            "*** and AskUbuntu user",
            "New member"
        ]
    ]

你的 ajax 请求的响应默认应该是 json

【讨论】:

您好,感谢您的回复。主要的是数据表不是 AJAX 来源的,它只是 DOM。因此,当我请求 json 时,它会引发错误。此外,由于我在一页中有 3 个具有大量配置的表,因此无法将所有表重构为 ajax 源代码。 如果将基于 Ajax 源的数据表更改为唯一的解决方案,那么我必须从项目开始就更改整个概念。不过没关系,那我试试看。

以上是关于刷新数据表而不重新加载页面的主要内容,如果未能解决你的问题,请参考以下文章

存储数据后是不是有更好的方法从 localStorage 获取数据而不刷新/重新加载页面

以角度刷新下拉列表而不重新加载页面

如何在IE浏览器中重新加载/刷新页面而不使用JS弹出表单重新提交

如何在不刷新页面的情况下重新加载数据表?

在对话框上显示数据而不重新加载页面

重新加载图像而不刷新页面