使用 Ajax 刷新表答案

【问题标题】：Refresh on table using Ajax使用 Ajax 刷新表
【发布时间】：2020-02-25 19:12:42
【问题描述】：

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

表：

<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 函数的表格如下所示，其中每页仅显示 10 条记录：

但是在成功刷新此行时：

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

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

【问题讨论】：

这太复杂了，人们无法帮助您。尝试更清楚地解释您的问题。代码的哪一部分产生了问题。解释你想要达到的目标，以及目前正在发生的事情？您是否收到错误消息或只是错误的数据？目前，你只有很多代码，但你不解释出了什么问题。
@Merijn dk 不返回错误。问题是当我更改数据时刷新表。我刷新，但数据表过滤器停止工作。问题是 insert_register10 函数的成功。然后我想通过更改表数据来更新它，但是数据表停止工作。我将在结果中添加图像
@Merijn dk 你能更好地理解我的问题吗？
@Merijn dk 朋友帮不了我，我解决不了这个问题
添加 2 个屏幕截图并没有使其更清晰。从反应的数量可以看出。试着让问题更清楚。有很多代码。把它瘦下来。尽量准确。你想做什么，而正在发生什么？

标签： javascript html datatable

【解决方案1】：

虽然您的问题并不完全清楚，但以下是我的想法：我认为问题在于，一旦您通过 AJAX-ed 响应将新内容呈现到您的页面上，控制表格的 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()
  }
});

【讨论】：

这是我的问题。我没有初始化表格的代码。我有我在问题中提出的 js 和使用数据表呈现表格的代码。如何初始化表以再次调用数据表函数？
你首先使用什么JS库来生成表格？
我正在使用这个库<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>。对于数据表，我使用的是<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
我正在尝试这样success: function(result){ $('.form10')[0].reset(); $("#add_data_Modal12").modal("hide"); $("#table6").load(" #table6 > *"); $('#table6').dataTable().fnDestroy(); $('#table6').dataTable(); in the ajax of the insert_register10 function button, but it doesn't work
问题出在负载上。加载不会让Datatable启动$("#table6").load(" #table6 > *");

【解决方案2】：

我解决了我的问题如下。在 ajax 成功的情况下，我销毁了表 datatble，然后发出异步请求并使用 datatable 再次呈现表。

代码：

   success: function(result)
    { 
    $('.form10')[0].reset();
    $("#add_data_Modal12").modal("hide");
    $('#table6').dataTable().fnDestroy();
    $.ajax({
       url: './atualizarprodutosrececao',
       type: 'get',
       dataType: 'json',
       success: function(data){
         var linha = ``; 
         for(let item of data){ 
         linha += `<tr id=${ item.Id }>          
         <td>${ item.Produto }</td> 
         <td>${ item.Quantidade }</td> 
         <td>${ item.Minimo }</td>   
         <td><button type="button" id="${ item.Id }" data-id="${ item.Id }"  data-target="#add_data_Modal6" class="btn btn-warning btn-sm edit_data1" ><span class="glyphicon glyphicon-pencil"></span></button></td>            
         </tr>`; 
         } 
         $("#table6 tbody").html(linha);
    $('#table6').dataTable({ 
            "pagingType": "full_numbers",                           
            "oLanguage": {
            "sProcessing": "Aguarde enquanto os dados são carregados ...",
            "sLengthMenu": "Mostrar _MENU_ registros por pagina",
            "sZeroRecords": "Nenhum registro correspondente ao criterio encontrado",
            "sInfoEmtpy": "Exibindo 0 a 0 de 0 registros",
            "sInfo": "Exibindo de _START_ a _END_ de _TOTAL_ registros",
            "sInfoFiltered": "",
            "sSearch": "<span class='glyphicon glyphicon-search'></span>",
            "oPaginate": {
            "sFirst":    "<span class='glyphicon glyphicon-fast-backward'></span>",
            "sPrevious": "<span class='glyphicon glyphicon-backward'></span>",
            "sNext":     "<span class='glyphicon glyphicon-forward'></span>",
            "sLast":     "<span class='glyphicon glyphicon-fast-forward'></span>"
        }
     }
     });             
         }

        });

    }

【讨论】：