Question

我想在更新并保持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 > *");

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

Answer 1

尽管您的问题尚不完全清楚，但我的想法是：我认为问题在于，一旦您通过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()
  }
});

Answer 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>"
        }
     }
     });             
         }

        });

    }

使用Ajax刷新表

2 个答案: