Javascript 使用Ajax刷新表

我想在更新并保持datatables函数工作后更新表数据。 使用modal编辑“我的表格”中的行时，刷新表格时，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>

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

但当这一行成功刷新时：

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

datatables功能不再工作，不再显示每页10条记录，如图所示：

---

尽管你的问题并不完全清楚，但我的想法如下：我认为问题在于，一旦你通过AJAX ed响应将新内容呈现到页面上，控制表格过滤和搜索的JavaScript函数就不再起作用了。对吗

我猜，根据您的信息：在成功调用AJAX之后，您需要重新初始化表JavaScript。下面是一些要演示的伪代码：

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

$（'.my table'）.initialize（）

通过

$.ajax

返回数据并更新表后，只需在

成功

中重新运行此初始化代码，如：

$.ajax({
...
成功：功能（结果）{
//在此处更新表的代码
//现在我们可以重新初始化：
$（'.my table'）.initialize（）
}
});

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

代码：

成功：函数（结果）
{ 
$（'.form10'）[0].reset（）；
$（“#添加#u数据_模型12”）.modal（“隐藏”）；
$（'#table6'）.dataTable（）.fnDestroy（）；
$.ajax({
url:“./ATUALIZARPRODUTOSRECEAO”，
键入：“get”，
数据类型：“json”，
成功：功能（数据）{
var linha=`；
对于（让数据项）{
林哈+=`
${item.Produto}
${item.Quantidade}
${item.Minimo}
`; 
} 
$（#表6-tbody”）.html（linha）；
$（'#表6'）。数据表（{
“pagingType”：“完整编号”，
“语言”：{
“sProcessing”：“Aguarde enquanto os dados são carregados…”，
“长菜单”：“最长菜单”，
“sZeroRecords”：“Nenhum registro通讯员和标准顾问”，
“sInfoEmtpy”：“Exibindo 0 a 0 de 0 registros”，
“sInfo”：“开始、结束、总计登记”，
“Sinfofilted”：“，
“搜索”：“搜索”，
“oPaginate”：{
“第一项”：“第三项”，
“以前的”：“，
“sNext”：“，
“斜杠”：”
}
}
});             
}
});
}

这太复杂了，人们无法帮助您。试着更清楚地解释你的问题。代码的哪一部分产生了问题。解释你正在努力实现的目标，以及目前正在发生的事情？您是否收到错误消息或只是错误数据？目前，您只有很多代码，但没有解释出哪里出了问题。@Merijn dk不返回错误。问题是在更改数据时刷新表。我刷新了，但datatables过滤器停止工作。问题在于insert_register10函数是否成功。然后我想通过更改表数据来更新它，但是datatables停止工作。我将在问题中添加图像，并使用results@Merijndk那么你能更好地理解我的问题吗？@Merijn dk friend帮不了我，我解决不了这个问题添加2个截图并没有让问题变得更清楚。从反应的数量可以看出。尽量把问题弄清楚。有很多方法来编写代码。瘦身。尽量准确。你想做什么，发生了什么事？这是我的问题。我没有初始化表的代码。我有我在问题中提出的js和用datatables呈现表的代码。如何初始化表以再次调用datatable函数？您首先使用哪个JS库生成表？我使用的是这个库

。对于数据表，我使用的是

，我试着这样做

成功：函数（结果）{$（'.form10'）[0].reset（）；$（“#add_data_Modal12”）.modal（“hide”）；$（“#table6>”）.load（“$（'#table6'））.dataTable（）.fndrome（）.fndrome（）。$（'#table6'）.dataTable（）；在ajax中的insert_register10功能按钮，但它不起作用

问题在于加载。加载不会让Datatable启动

$（“#table6”）。加载（“#table6>*”）

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

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

        });

    }