JQuery Datatables 数据不会更新

Posted 2023-05-07

【中文标题】JQuery Datatables 数据不会更新

【英文标题】：JQuery Datatables data won't updating

【发布时间】：2016-11-21 19:01:24

【问题描述】：

我是 jquery 的新手，尤其是数据表。我将从 ajax 调用响应收到的数据加载到表中，如下所示：

$(document).ready(function() 
        $("#reservation").on("change", sendDate);
      );
    function LoadResponse(data) 
                	var table = $("#example2 > tbody");
                	table.empty();
                	table.html('');
                    var rows = data.split(/[@]/);
                    $("#dvCSV").html('');
                    //there are null before the first /@/
                    for (var i = 1;i<rows.length;i++) 
                        var row = "<tr>";
                        var cells = rows[i].split(", ");
                        var cell = "";
                        for (var j = 0; j < cells.length; j++) 
                             cell = cell + "<td>"+cells[j]+"</td>";
                        
                        row = row+cell+"</tr>";
                        table.append(row);
                    
            		$(function () 
        			  $('#example2').DataTable().fnClearTable();
                        $('#example2').DataTable(
                            "destroy":true,
                            "dom": 'itp',
                            "paging": true,
                            "lengthChange": false,
                            "searching": false,
                            "ordering": true,
                            "info": true,
                            "autoWidth": false
                          );
                  ;
                        console.log(table);)
    ;

    function sendDate() 
    	var formData = new FormData($("#upload-file-form")[0]);
    	$.ajax(
    	    url: "/sendDate",
    	    type: "POST",
    	    data: formData,
    	    enctype: 'multipart/form-data',
    	    processData: false,
    	    contentType: false,
    	    cache: false,
    	    beforeSend: function ()
    //	    	location.reload(false);
    //			$('#example2').DataTable().fnClearTable();
    	    ,
    	    success: function (data) 
    	      // Handle upload success
    //	    	location.reload(false);
    	    	alert("Date send to server: "+data+". date range:"+formData.get("dateRange"));
    	    	LoadResponse(data);
    	    ,
    	    error: function (error) 
    	      // Handle upload error
    	    
    	);
    

该代码适用于第一次请求。但是，在用户发出另一个请求，然后服务器给出响应后，该表将不会加载新数据。相反，它仍然使用在客户端收到的第一个数据。我可以保证收到数据，正如它在 alert("date send to server: ") 上看到的那样。

我尝试了很多方法，但都没有奏效，包括：

table.empty();

table.html('');

清空 tbody

 $("#dvCSV").html('');

重新加载页面。这将使表从第一次丢失数据。

location.reload(false);

还有这个。

$('#example2').DataTable().fnClearTable();

这会加载新数据，但只是临时的.对表执行的任何操作都会将其恢复为旧数据。例如分页操作、显示条目等。

这是我的表格 html：

    <div class="box-body">
                  <table id="example2" class="table table-bordered table-hover">
                    <thead>
                    <tr>
                      <th>MSISDN</th>
                      <th>Action</th>
                      <th>Filename</th>
                      <th>Date Uploaded</th>
                      <th>Status</th>
                      <th>Status Message</th>
                    </tr>
                    </thead>
                    <tbody  id="dvCSV">
                    </tbody>
                    <tfoot>
                    <tr>
                      <th>MSISDN</th>
                      <th>Action</th>
                      <th>Filename</th>
                      <th>Date Uploaded</th>
                      <th>Status</th>
                      <th>Status Message</th>
                    </tr>
                    </tfoot>
                  </table>
                </div>
                <!-- /.box-body -->

任何帮助或想法将不胜感激（：

【参考方案1】：

很抱歉，这个solution 解决了我的问题。

使用$('#example2').dataTable().fnDestroy();

【参考方案2】：

您需要做的是重新加载表格。最初将您的数据表实例分配给像

这样的变量

var dTable = $('#example2').DataTable(
                            "destroy":true,
                            "dom": 'itp',
                            "paging": true,
                            "lengthChange": false,
                            "searching": false,
                            "ordering": true,
                            "info": true,
                            "autoWidth": false
                          );

然后，当您收到更新时，只需使用该实例重新加载表即可。

 dTable .ajax.reload();

https://datatables.net/reference/api/ajax.reload()

【讨论】：

在添加新数据之前必须重新加载还是在添加新数据后重新加载？

用新数据更新后，重新加载表

我尝试将var dTable 放入$(document).ready(function() );。它会重新加载数据，但不会更新表格信息、分页等。

Ups，我想我在here 找到了我的解决方案。你知道它比你的解决方案运行得更快还是更慢？那我应该用这个链接回答然后接受吗？还是我应该删除我的问题？

好的。也看看这个。***.com/questions/12934144/…

【参考方案3】：

在1.10.16（2018）版本中，如果要销毁一个DataTable实例，必须使用：

// Get Instance
var TablaExample = $('#TablaExample').DataTable();

// Use method directly to Destroy
TablaExample .destroy();

注意：此方法不能破坏表中的数据，如果你在html中“手动”设置了tr和td标签中的数据。

如果要删除表格内的所有数据，可以使用 clear().draw() 方法。例如：

// Get Instance 
var TablaExample = $('#TablaExample').DataTable();

// Delete all data inside table and maintain the DataTable instance
TablaExample.clear().draw();