javascript - 使用Ajax刷新表

我想在更新并保持datatables函数正常工作后更新表数据。
当使用模式编辑表中的一行时，刷新表时datatable函数不再起作用，例如分页和搜索选项。

表：

<table class="table table-responsive" id="table6">
    <thead>
        <tr>
            <th>Produto</th>
            <th>Stock</th>
            <th>Stock Minimo</th>
            <th>Ação</th>
        </tr>
    </thead>
    <tbody>
        <?php  do{ ?>
        <tr id="<?php echo $produto3["Id"]; ?>">
            <td><?php echo $produto3["Produto"]; ?></td>
            <td><?php echo $produto3["Quantidade"]; ?></td>
            <td><?php echo $produto3["Minimo"]; ?></td>
            <td><button type="button" id="<?php echo $produto3["Id"]; ?>" data-id="<?php echo $produto3["Id"]; ?>"  data-target="#add_data_Modal6" class="btn btn-warning btn-sm edit_data1" ><span class="glyphicon glyphicon-pencil"></span></button></td>
        </tr>
        <?php } while($produto3 = $result3->fetch_assoc()); ?>
    </tbody>
</table>

然后我有模态。保存模式更改时，我使用以下js刷新表：

 function inserir_registo10() {
    var dadosajax = {
        'Id': $("#Id1").val(),
        'Produto': $("#Produto2").val(),
        'DescricaoUnid': $("#DescricaoUnid1").val(),
        'IdReqRec': $("#IdRec:checked").val(),
        'Quantidade1': $("#Qtd2").val(),
        'Quantidade': $("#Qtd1").val()
    };
    $.ajax({
        url: './alterarproduto',
        type: 'POST',
        cache: false,
        data: dadosajax,
        error: function () {
            $(".error_message").removeClass('hide');
        },
        success: function (result) {
            $('.form10')[0].reset();
            $("#add_data_Modal12").modal("hide");
            $("#table6").load(" #table6 > *");
        }
    });
}

最初使用datatables函数时，该表如下所示，其中每页仅显示十条记录：


但是当成功刷新此行时：

$("#table6").load(" #table6 > *");

datatables函数不再起作用，并且不再显示每页10条记录，如图所示：

最佳答案

尽管您的问题尚不完全清楚，但我的想法是：我认为问题是，一旦您通过AJAX版本的响应将新内容呈现到页面上，用于控制表格的JavaScript函数（过滤和搜索）就不再起作用。那是对的吗？

我的猜测基于您的信息：成功的AJAX调用后，您需要重新初始化表JavaScript。以下是一些伪代码来演示：

您可能有一些JS代码来初始化表格，例如：

$('.my-table').initialize()

通过$.ajax返回数据并更新表后，只需在success中重新运行此初始化代码，如下所示：

$.ajax({
  ...
  success: function (result) {
    // Code to update your table here

    // And now we can reinitialize:
    $('.my-table').initialize()
  }
});