从 Django JSON 填充 DataTable - Javascript

当使用 Django 开发 Web 应用程序时，经常需要将数据展示在前端的 DataTable 表格上。本文将介绍如何使用 Javascript 从 Django 中获取数据并填充 DataTable 表格。

1. 从 Django 中获取 JSON 数据

通常，我们从 Django 中获取数据时，使用 Ajax 请求获取 JSON 格式的数据。以下代码片段演示如何在 Django 中视图函数中生成 JSON 格式的数据并返回给前端：

import json
from django.http import JsonResponse
from app.models import MyModel

def my_view(request):
    my_data = MyModel.objects.all()
    data = [{'id': item.id, 'name': item.name, 'age': item.age} for item in my_data]
    return JsonResponse({'data': data})

此视图函数将从 MyModel 中获取所有数据，并将其转换为包含每个对象属性的 JSON 数组。最后，将 JSON 数据返回到前端。

2. 生成 DataTable 表格

在前端实现 DataTable 表格，需要借助第三方库 jQuery 和 DataTable。以下是步骤：

2.1 引入 jQuery 和 DataTable 库

<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha384-6M5laaFdflM6gHJ2gN7QjRXaOtADFc / bZLPxNOE hM / x+wD1Q5tvmE mI + U8nN7H5"
        crossorigin="anonymous">
</script>

<!-- Include DataTables -->
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">

2.2 使用 Ajax 请求获取 JSON 数据

$.ajax({
     url: '/my_view/',
     method: 'GET',
     dataType: 'json',
     success: function(data) {
         // do something
     },
     error: function(xhr, errmsg, err) {
         console.log(xhr.status + ": " + xhr.responseText);
     }
});

此处使用 jQuery 的 ajax() 函数从服务端获取 JSON 数据。Url 的值是服务器视图的地址，而 method 是 HTTP 方法，dataType 是服务器响应的数据类型，我们需要将其设为 JSON。

2.3 使用 DataTable 插件生成表格

$('#datatable').DataTable({
    "data": data.data,
    "columns": [
        { "data": "id" },
        { "data": "name" },
        { "data": "age" }
    ]
});

在上述代码中，我们使用名称为 datatabe 的 HTML 元素初始化 DataTable。data 参数包含我们获取的 JSON 数据，columns 包含表格列的详细信息。在这种情况下，列将使用 id，name 和 age 作为列头，并从将数据中提取该属性在列表中显示其值。

结语

使用 Django 生成 JSON 数据并使用 DataTables 表格呈现数据是一种简单而强大的方式。要求您学习一些 Javascript 和 jQuery 的基本知识，并结合 DataTables 表格的 API 来生成表格。但是，凭借 Django 的强大功能，您可以轻松地生成需要的数据，这样 DataTables 就会使其显示出来。