dataTable - 表单提交后重新加载表

Question

我已经在这里阅读了很多，但我找不到可行的解决方案！我有一个数据表，在一列内有一个编辑按钮。如果用户单击编辑按钮，则会出现一个模式，并且用户可以更改数据表中的条目。提交表单后，更改将在数据库中完成。

现在我想在不重新加载页面的情况下自动刷新我的表格。我怎样才能做到这一点？我必须在我的成功消息中调用什么？

这是我的代码：

index.php:

if ($savetodo=="true") {
    $content=array("descr"=>$descr);
    updateToDoInfo($id,$content);

}

AJAX 提交：

                <script>
                    $(function() {
                        $('#form_edittodo').on(\"submit\", function(event) {
                            event.preventDefault();

                            $.ajax({
                                url: 'index.php',
                                type: 'post',
                                data: $(this).serialize(),
                                beforeSend: function(){
                                        $('#loading').show();
                                    },
                                    complete: function(){
                                        $('#loading').hide();
                                    },
                                success: function() {
                                   // What should I enter here?
                            });
                        });
                    });
                </script>

数据表：

    <script>
    $(document).ready(function() {
        $('#todolist12').DataTable();
    } );
    </script>

如果有人可以帮助我，那就太好了。

Answer 1

您需要使用 dataTables data() 方法更新单元格。

例如，您可能希望成功函数看起来像这样：

success: function() { 
    $('#todolist12').DataTable().cells("#idOfChangedCell").data("Update to cell").
}

但是，要使更改实际出现在您的网页上，您还需要调用 dataTables 的 draw() 方法：

$('#todolist12').DataTable().draw();

Answer 2

您可以执行 location.reload() 来重新加载页面。

如果您不想重新加载页面，那么您需要使您的表格可通过 ajax 加载。要真正巧妙，您将能够加载单行。

您还可以将新行作为保存请求的响应返回，并使用新标记更新表格。

或者您可以使用 javascript 模板在客户端呈现数据并将记录返回为 json。

您有很多选择，但您作为开发人员来确定正确的解决方案。除了 location.reload() 之外，没有一行或几行可以解决您的问题。这一切都取决于您的应用程序现在是如何编写的，或者您如何修改它以执行您希望它执行的操作。