JQuery Datatables 数据不会更新

Question

我是 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 -->

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

Answer 1

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

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

Answer 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()

Answer 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();