django 利用ajax对dataTable表格实现异步刷新

本人新手，实在看不懂dataTable官网对ajax接口刷新表格的描述。经多次折腾，写下刷新过程。
要点：datatables表格初始化以后，不能直接刷新表格，需先清除表格数据：fnCleatTable()，然后再填入数据：fnAddData()。
html中关于表格的标签如下：

<table id="tab" class="hover row-border" width="80%">
	<thead>
		<tr>
			<th>Column 1</th>
			<th>Column 2</th>
			<th>Column 3</th>
			<th>Column 4</th>
			<th>Column 5</th>
			<th>Column 6</th>
			<th>Column 7</th>
			<th>Column 8</th>
			<th>Column 9</th>
		</tr>
	</thead>
</table>

在dataTable没有初始化前，这个标签的模样如下：

完成初始化后，dataTable表格如下显示：

表格初始化：

$(document).ready(function() { //dataTables初始化
	$('#tab').dataTable({
		data:{{ List |safe }},
		columns:[
			{"title":"国别"},
			{"title":"累计病例"},
			{"title":"新增病例"},
			{"title":"累计死亡"},
			{"title":"新增死亡"},
			{"title":"累计康复"},
			{"title":"现存病例"},
			{"title":"重症"},
			{"title":"累计检测"},
		],
		columnDefs: [
			{ "className": "align-center" ,"targets": [0,1,2,3,4,5,6,7,8]} 
		],
	})
})

下面利用ajax对dataTable表格实现刷新。在网页中我们选择不同的日期，会得到不同数据的表格，现根据选择的日期，通过ajax向后台索取更新的表格数据。

$.ajax({
	url:"tableajax", 
	type:"POST", 
	dataType: "json", //json
	data:{
		date:date, //发送获取表格的日期参数
		"csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val() ,
	},
	success:function(data){ // data形参就是异步提交的返回结果
		var List= eval("("+data.List+")");
		var tty =$('#tab').dataTable();
		tty.fnClearTable(); //清空表格
		tty.fnAddData(List, true); //刷新表格
	}
})

返回的数据是python列表List：

data.List = "[ ["world", "6562695", "121413", "386788", "4929", "3161280", "3014627", "54202", "0"],
["usa", "1901783", "20578", "109142", "1083", "688670", "1103971", "16939", "19096671"],
["brazil", "583980", "27312", "32547", "1269", "266132", "285301", "8318", "930013"],
...... ]"

从ajax返回的数据符合json格式，看上去data.List多了外面的双引号，用eval方法将其去除。然后定义变量tty，得到dataTable所要写入标签的id。由于dataTable表格已经初始化，在刷新表格前需要清除初始化，fnCleanTable()，再对其刷新fnAddTable()，即完成dataTable表格刷新。
所谓异步刷新即局部刷新，只刷新表格中数据，对表头和dataTable的其他杂碎不刷新。
所需的css和js库为：

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"> 
 <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
 <script src="{% static 'jquery-3.5.1.min.js' %}"></script>