如何在Django中过滤模型并以DataTables表格展示？

问题根源 #

1. 序列化处理错误：原视图中用json.loads(serialize('json', filtered))将JSON字符串转成了Python列表，传到模板后会被渲染成带单引号的字符串，导致JavaScript解析失败。
2. 模板变量转义问题：HTML中直接用"{{filtered}}"会让Django自动转义双引号，生成的JSON格式不合法。
3. DataTables字段映射错误：Django序列化的JSON结构包含fields嵌套属性，原columns配置未正确指向该层级。

修正后的完整代码 #

视图函数

def site(request, site_name):
    filtered = Participant.objects.filter(site_name=site_name)
    # 直接保留serialize返回的原生JSON字符串，无需转成Python列表
    serialized = serialize('json', filtered)
    return render(request, 'site.html', context={'site': site_name, 'filtered': serialized})

HTML变量传递

<script>
    // 使用|safe过滤器避免Django转义JSON字符串，直接获取合法的对象数组
    const filteredData = {{ filtered|safe }};
</script>

DataTables初始化代码

$(document).ready(function() {
    $('#my-table').DataTable( {
        data: filteredData,
        lengthMenu: [[25, 50, 100, -1], [25, 50, 100, "All"]],
        pageLength: 50,
        responsive: true,
        processing: true,
        serverSide: false,
        // 对应Django序列化后的结构，字段需从fields中读取
        columns: [
            { "data": "fields.some_data" },
            // 示例：如果需要展示主键，可添加
            // { "data": "pk", "title": "ID" }
        ]
    } );
} );

关键说明 #

• 保留serialize('json', filtered)的原生JSON字符串，避免Python和JS之间的格式转换错误。
• |safe过滤器确保Django不转义JSON中的双引号，让JavaScript直接识别为合法的对象数组。
• DataTables的columns.data必须匹配Django序列化后的结构：每个数据项的字段都在fields属性下，因此要写成fields.字段名。

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