从Django模板的上下文中将JSON对象呈现为Ajax DataTable

Question

我正在寻找一种可重用且直接的解决方案，以使用Django将有效​​的JSON对象呈现为HTML表。流程如下：

Views.py

from utils load get_data_frame

class MyView(TemplateView):
    template_name = "my_template.html"
    df = get_data_frame()
    column_data = [{"field": val, "title": val} for val in df.columns.values]
    json_object = df.to_json(orient='records')
    context['json_data'] = json_object
    context['columns'] = column_data

my_template.html

<script>
    var my_data = {{ json_data|safe }};
    var column_data = {{ columns|safe }};
    $( function() {
        $( "#my-cool-table" ).dataTable(
        {
            "columnDefs": [{
            "defaultContent": "-",
            "targets": "_all"
            }],
            "data": my_data,
            "columns": column_data,
        });
    });
</script>

{% if json_data %}
    <table id="my-cool-table">
    <thead>
    </thead>
    <tbody>
    </tbody>
    </table>
{% else %}

但是，当我渲染该模板时，列显示没有问题，但是表的数据仅呈现defaultContent中指定的默认值“-”。我是否缺少dataTables的论点？还是<script>标签在错误的位置？

当我在Firefox控制台中打印变量my_data时，其格式为：

Array(17) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]

Answer 1

看起来不错。我相信您只需要将field替换为data：

column_data = [{"data": val, "title": val} for val in df.columns.values]
                 ^^^^

columns.data指定对象属性/源。