如何在Django中正确实现DataTables与Ajax集成？模型数据传递遇阻

我来帮你搞定这个问题，其实用Django配合DataTables通过Ajax展示模型数据并不复杂，咱们一步步来梳理：

1. 完善视图函数（views.py） #

你之前的myModel_asJson函数没写完，这里提供两种可行的实现方式，按需选择：

方式一：使用Django内置序列化器 #

这种方式直接用Django的serializers工具序列化模型对象，适合快速开发：

from django.shortcuts import render
from django.http import JsonResponse
from django.core import serializers
from .models import MyModel

def myModel_asJson(request):
    # 获取所有MyModel数据
    object_list = MyModel.objects.all()
    # 序列化为JSON格式字符串
    json_data = serializers.serialize('json', object_list)
    # 返回JsonResponse，注意safe=False，因为传入的是字符串
    return JsonResponse(json_data, safe=False)

方式二：手动构造数据格式（更灵活） #

这种方式可以自定义返回的字段和结构，更适配DataTables的解析需求：

from django.shortcuts import render
from django.http import JsonResponse
from .models import MyModel

def myModel_asJson(request):
    # 指定要返回的字段，直接转为字典列表
    object_list = MyModel.objects.values('id', 'someAttr')
    # 将QuerySet转换为Python列表，方便JsonResponse处理
    data = list(object_list)
    return JsonResponse(data, safe=False)

2. 配置URL路由 #

在你的app的urls.py中，给刚才的视图函数映射一个API路由：

from django.urls import path
from . import views

urlpatterns = [
    # 你的其他路由...
    path('api/mymodel/', views.myModel_asJson, name='mymodel-api'),
]

3. 编写前端模板（比如mytable.html） #

首先确保你已经把jQuery、DataTables的CSS和JS资源下载到项目的static目录中，然后通过Django的static标签引入：

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>MyModel 数据展示</title>
    <!-- 引入DataTables样式 -->
    <link rel="stylesheet" type="text/css" href="{% static 'datatables/css/jquery.dataTables.min.css' %}">
    <!-- 引入jQuery -->
    <script type="text/javascript" src="{% static 'jquery/jquery.min.js' %}"></script>
    <!-- 引入DataTables脚本 -->
    <script type="text/javascript" src="{% static 'datatables/js/jquery.dataTables.min.js' %}"></script>
</head>
<body>
    {% csrf_token %} <!-- 解决CSRF跨域问题 -->
    <!-- DataTables表格结构 -->
    <table id="mytable" class="display" style="width:100%">
        <thead>
            <tr>
                <th>ID</th>
                <th>属性值</th>
            </tr>
        </thead>
        <tbody>
            <!-- 数据将通过Ajax自动填充 -->
        </tbody>
    </table>

    <script>
        // 全局配置Ajax，带上CSRF Token
        var csrftoken = $('[name=csrfmiddlewaretoken]').val();
        $.ajaxSetup({
            beforeSend: function(xhr, settings) {
                if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                }
            }
        });

        // 初始化DataTables
        $(document).ready(function() {
            $('#mytable').DataTable({
                "ajax": "{% url 'mymodel-api' %}",
                // 注意：如果用方式一的序列化器，这里要改成对应结构
                // 方式一的columns配置：{"data": "pk"}, {"data": "fields.someAttr"}
                // 方式二的columns配置如下：
                "columns": [
                    { "data": "id" },
                    { "data": "someAttr" }
                ]
            });
        });
    </script>
</body>
</html>

几个关键注意点 #

• Python3兼容：你的模型里的__unicode__方法在Python3中要改成__str__，否则序列化会出问题：

  class MyModel(models.Model):
      someAttr = models.CharField(max_length=255)  # CharField必须指定max_length！
      def __str__(self):
          return self.someAttr
  

• CharField必填参数：Django的CharField必须指定max_length，否则会抛出数据库迁移错误，记得补上。
• CSRF问题：如果遇到CSRF验证失败，一定要在模板中加入{% csrf_token %}，并配置Ajax的全局请求头，如上面模板中的代码所示。

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