Django视图显示原始数据而非DataTables格式化数据问题求助

核心问题 #

你的SampleList视图直接返回JSON数据，而非渲染包含DataTables的模板页面——这就是访问该URL时只看到原始JSON的原因，DataTables根本没有机会加载并发起Ajax请求。同时，DataTables的配置与返回的JSON格式不匹配，也会导致数据无法正确解析。

具体修正步骤 #

1. 拆分视图：页面渲染与数据接口分离 #

需要两个视图：一个负责渲染带表格的模板页面，另一个专门提供JSON数据接口。

修改原有视图并新增API视图：

from django.views.generic import ListView, View
from django.http import JsonResponse
from .models import Samples

# 负责渲染模板的页面视图
class SampleList(LoginRequiredMixin, ListView):
    model = Samples
    template_name = "samples/sample_list.html"  # 替换为你的模板实际路径

# 负责返回JSON数据的API视图
class SampleDataAPI(LoginRequiredMixin, View):
    def get(self, request, *args, **kwargs):
        # 查询数据并包装成DataTables需要的格式（外层带data键）
        data = list(Samples.objects.values("id", "sample_code", "reception_date"))
        return JsonResponse({"data": data})

2. 配置对应URL #

在应用URL配置中添加两个路由：

from django.urls import path
from .views import SampleList, SampleDataAPI

app_name = "samples"
urlpatterns = [
    path("", SampleList.as_view(), name="samplelist"),  # 页面路由
    path("data/", SampleDataAPI.as_view(), name="sampledata"),  # 数据接口路由
]

3. 修正DataTables配置 #

更新模板中的JavaScript，指向新的数据接口URL，并确保格式匹配：

$(document).ready(function() {
    $('#samples-table').DataTable({
        "ajax": {
            "url": "{% url 'samples:sampledata' %}",
            "dataSrc": "data"  // 对应API返回的外层data键
        },
        "columns": [
            {"data": "id"},
            {"data": "sample_code"},
            {"data": "reception_date"},
        ],
    });
});

4. 其他注意事项 #

• 模板中的<tbody>可以保持为空，DataTables会自动填充数据。
• 确保jQuery和DataTables的加载顺序正确（先加载jQuery，再加载DataTables），建议将脚本放在</body>标签前，避免DOM未加载完成就执行代码。
• 打开浏览器控制台（F12）排查潜在报错，比如404错误（URL配置错误）、字段名不匹配错误等。

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