如何通过Ajax调用更新Django项目Datatable并实现Pythonic优化方案

直接修改你的JS更新逻辑即可，在Ajax的success回调中清空原有表格内容，遍历返回的数据拼接行插入表格：

var intervalID = setInterval(updateTable, 10000);

function updateTable()
{
    $.ajax({
        method: "GET",
        // 推荐用Django模板渲染url别名，避免写死路径：url: "{% url 'project_page_ajax' %}",
        url: "/project_page_ajax/",
        success: function(data, textStatus, request) {
            const tableBody = $('#ittFileUploadTable tbody');
            // 清空原有表格内容
            tableBody.empty();
            // 遍历返回的文件列表拼接表格行
            data.file_hist_results.forEach(item => {
                const newRow = `
                <tr>
                    <td>${item.filename}</td>
                    <td>${item.uploaded}</td>
                    <td>${item.updated}</td>
                    <td>${item.user}</td>
                    <td>
                        <button class="btn btn-secondary delete-itt-file" data-file-id="${item.id}">
                            <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16">
                                <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"></path>
                            </svg>
                        </button>
                    </td>
                </tr>
                `;
                tableBody.append(newRow);
            });
        }
    });
}

// 删除按钮改用事件委托绑定，避免每次更新表格后重新绑定事件
$(document).on('click', '.delete-itt-file', function() {
    const fileId = $(this).data('file-id');
    // 在此处补充删除文件的逻辑即可
});

注意：如果你的表格是通过jQuery DataTable插件初始化的，不需要手动拼接DOM，直接调用$('#ittFileUploadTable').DataTable().ajax.reload()即可，需要提前调整DataTable的数据源配置为你的Ajax接口。

• 简化ORM查询写法：FileHistory.objects.all().filter(user=request.user)可直接写为FileHistory.objects.filter(user=request.user)，不需要额外调用all()
• 抽取重复逻辑：project_page视图中POST、GET分支都重复写了文件列表查询、context赋值的逻辑，可以抽成公共函数减少冗余代码
• 优化接口返回字段：values()默认返回模型所有字段，可指定需要的字段避免返回敏感信息，例如改为.values('id', 'filename', 'uploaded', 'updated', 'user__username')，可直接返回用户名而非用户ID，前端无需额外处理就能展示
• 上传流程优化：当前文件上传走普通表单提交会触发整页刷新，可改为Ajax提交上传表单，上传成功后主动触发一次表格更新，全程无需页面跳转
• 实时性方案优化：如果对实时性要求高，可改用Django Channels实现WebSocket主动推送更新，避免无效轮询请求；如果10秒轮询满足业务需求，现有方案完全可用

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