如何在Django中实现DataTables结合AJAX的JSON实时更新？

针对数据库新增记录后DataTables无法实时更新的问题，以下是几种实用的实现方案：

方法一：定时轮询（快速落地） #

适合更新频率不高的场景，通过前端定时调用后端接口刷新表格数据。

前端代码实现 #

// 初始化DataTables实例
const shipmentTable = $('#your-table-id').DataTable({
    ajax: '/api/getlist/',
    // 你的表格列配置等其他参数
});

// 每30秒自动刷新一次数据（可根据需求调整间隔）
setInterval(() => {
    // ajax.reload第二个参数设为false，保留当前分页位置
    shipmentTable.ajax.reload(null, false);
}, 30000);

注意事项 #

• 间隔时间不宜过短，避免频繁请求给服务器造成压力；
• 如果需要用户手动触发刷新，可添加一个按钮，点击时调用shipmentTable.ajax.reload()。

方法二：WebSocket实时推送（真正实时） #

适合高实时性需求的场景，通过Django Channels实现WebSocket通信，当数据库新增记录时后端主动推送数据到前端。

后端配置步骤 #

1. 安装依赖：

pip install channels channels-redis  # redis用作频道层后端，可选

2. 在settings.py中添加Channels配置：

INSTALLED_APPS = [
    # 其他应用
    'channels',
]

ASGI_APPLICATION = 'your_project_name.asgi.application'

# 配置频道层（使用redis为例）
CHANNEL_LAYERS = {
    "default": {
        "BACKEND": "channels_redis.core.RedisChannelLayer",
        "CONFIG": {
            "hosts": [("127.0.0.1", 6379)],
        },
    },
}

3. 编写WebSocket消费者（consumers.py）：

from channels.generic.websocket import AsyncWebsocketConsumer
import json

class ShipmentConsumer(AsyncWebsocketConsumer):
    async def connect(self):
        # 加入指定分组
        await self.channel_layer.group_add(
            'shipment_updates',
            self.channel_name
        )
        await self.accept()

    async def disconnect(self, close_code):
        # 退出分组
        await self.channel_layer.group_discard(
            'shipment_updates',
            self.channel_name
        )

    # 处理推送消息
    async def send_shipment_data(self, event):
        await self.send(text_data=json.dumps({
            'new_record': event['data']
        }))

4. 用Django信号触发推送（models.py）：

from django.db.models.signals import post_save
from django.dispatch import receiver
from channels.layers import get_channel_layer
from asgiref.sync import async_to_sync
from .models import Editors
from .serializers import YourEditorsSerializer  # 替换成你的序列化器

@receiver(post_save, sender=Editors)
def push_new_record(sender, instance, created, **kwargs):
    if created:  # 仅在新增记录时推送
        channel_layer = get_channel_layer()
        serializer = YourEditorsSerializer(instance)
        # 向分组发送消息
        async_to_sync(channel_layer.group_send)(
            'shipment_updates',
            {
                'type': 'send_shipment_data',
                'data': serializer.data
            }
        )

5. 配置WebSocket路由（asgi.py或单独的routing.py）：

from django.urls import re_path
from . import consumers

websocket_urlpatterns = [
    re_path(r'ws/shipment/$', consumers.ShipmentConsumer.as_asgi()),
]

前端代码实现 #

const shipmentTable = $('#your-table-id').DataTable({
    ajax: '/api/getlist/',
    // 你的表格列配置等其他参数
});

// 建立WebSocket连接
const ws = new WebSocket(`ws://${window.location.host}/ws/shipment/`);

ws.onmessage = function(event) {
    const response = JSON.parse(event.data);
    // 将新记录添加到表格并刷新
    shipmentTable.row.add(response.new_record).draw(false);
};

ws.onerror = function(error) {
    console.error('WebSocket连接出错:', error);
};

方法三：操作后即时刷新（页面内新增场景） #

如果是在当前页面完成新增操作，可在新增请求的成功回调中直接刷新表格：

// 假设新增记录的AJAX请求
$.ajax({
    url: '/api/add-editor/',
    method: 'POST',
    data: $('#your-form-id').serialize(),
    success: function() {
        // 新增成功后刷新表格
        shipmentTable.ajax.reload(null, false);
    },
    error: function() {
        alert('新增失败');
    }
});

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