如何在Django项目的AJAX请求中调用Datatables的draw()方法刷新表格

问题根因 #

1. Datatables内部维护了独立的数据源缓存，不会识别你直接操作DOM插入的行节点，调用draw()时会直接根据自身缓存的旧数据重绘表格，手动插入的行会直接被清除。
2. 你手动拼接的<tr>结构和Datatables配置的列渲染逻辑完全不匹配：配置的4列都有自定义渲染逻辑（需要拼接头像、跳转链接、下拉菜单等），直接插入纯文本列就算保留也不符合预期。
3. 默认的table.draw()调用不会触发重新请求后端接口拉取最新数据，只会用本地缓存的旧数据重绘。
4. 额外的小问题：$.ajaxSetup的定义放在了csrftoken变量获取和csrfSafeMethod函数定义之前，运行时beforeSend中读取csrftoken会是undefined，需要调整顺序。

修复方案（二选一即可） #

方案1：主动拉取最新接口数据（更推荐，数据一致性高）

无需手动拼接插入行，直接调用Datatables的AJAX重载方法，自动从你配置的数据源接口拉取最新数据重绘，操作最简单，也适合多用户操作的场景。
修改提交表单success回调中的逻辑：

1. 删除你手动拼接<tr>插入DOM的相关代码
2. 把原来的table.draw()替换为以下代码：

// 第一个参数为回调函数无需额外处理可传null，第二个参数为false表示重绘时保留当前分页，不会跳回第一页
table.ajax.reload(null, false);

方案2：直接添加行到Datatables缓存（性能更好，无需额外请求接口）

如果你不想发起新的接口请求，可以用Datatables自带的行添加API，自动触发你配置的列渲染逻辑生成符合要求的行结构，修改提交表单success回调中的逻辑：

1. 删除你手动拼接<tr>插入DOM的相关代码
2. 替换为以下代码：

var resData = JSON.parse(data["data"]);
var fields = resData[0]["fields"];
// 构造和你columns配置匹配的行数据对象，所有渲染用到的字段都要补全
var newRow = {
  name: fields.name || "",
  url: fields.url || "",
  avatar: fields.avatar || "",
  // lead需要是包含id、username、avatar、name属性的对象，和你接口返回的lead字段结构保持一致
  lead: fields.lead || ""
};
// 添加行并重绘，draw传false保留当前分页
table.row.add(newRow).draw(false);

额外优化建议 #

调整AJAX配置的顺序，避免csrfToken读取异常：

// 先定义方法和获取token
function csrfSafeMethod(method) {
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
};
var csrftoken =  jQuery("[name=csrfmiddlewaretoken]").val();
// 再配置全局AJAX
$.ajaxSetup({
    beforeSend: function(xhr, settings) {
        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});

内容的提问来源于stack exchange，提问作者phagyrhe