Javascript DataTables刷新有关CRUD操作的Django Ajax数据

我有一个Django项目，带有

分析模型。此模型是一个分析列表。它有一个
ForeignKeyField
和一个
manytomy
字段。最终目标是让用户转到一个URL，在那里他们可以查看DataTable中的分析列表、创建新的分析、编辑分析和删除分析。使用本教程：，我在一个常规的引导HTML表（即，不在DataTable中）中完成了所有这些目标

当我试图在混合中引入DataTable时，我发现我的DataTable来自HTML/DOM源，因此除非刷新页面，否则它不会更新。因此，我随后意识到，我需要将DataTable配置为最初从HTML/DOM中提取数据，然后再从AJAX中提取数据，或者我需要最初使用AJAX作为源

事实证明，常规的Django无法很好地序列化
许多
字段，因此我选择使用DRF来序列化我的
分析
模型。这在一定程度上起作用：JSON输出看起来不错，结果显示在我的DataTable中。但是，在进行Ajax调用时，数据仍然没有更新。此外，DataTables实际上不允许使用内联按钮进行编辑/删除，这就是为什么首先需要手动将这些按钮写入HTML的原因

问题：在执行Ajax CRUD操作时，如何强制从HTML/DOM获取数据的DataTable更新其数据而不刷新页面

views.py：

def analytic_list(request):
    analytics = Analytic.objects.all().select_related('analyticCategory').prefetch_related('dataSources')
    return render(request, 'analytics/analytic_list.html', {'analytics':analytics})

def save_analytic_form(request, form, template_name):
    data = dict()
    if request.method == 'POST':
        if form.is_valid():
            form.save()
            data['form_is_valid'] = True
            analytics = Analytic.objects.all()
            data['html_analytic_list'] = render_to_string('analytics/includes/partial_analytic_list.html', {
                'analytics': analytics
            })
        else:
            data['form_is_valid'] = False
    context = {'form': form}
    data['html_form'] = render_to_string(template_name, context, request=request)
    return JsonResponse(data)


def analytic_create(request):
    if request.method == 'POST':
        form = AnalyticForm(request.POST)
    else:
        form = AnalyticForm()
    return save_analytic_form(request, form, 'analytics/includes/partial_analytic_create.html')


def analytic_update(request, pk):
    analytic = get_object_or_404(Analytic, pk=pk)
    if request.method == 'POST':
        form = AnalyticForm(request.POST, instance=analytic)
    else:
        form = AnalyticForm(instance=analytic)
    return save_analytic_form(request, form, 'analytics/includes/partial_analytic_update.html')

def analytic_delete(request, pk):
    analytic = get_object_or_404(Analytic, pk=pk)
    data = dict()
    if request.method == 'POST':
        analytic.delete()
        data['form_is_valid'] = True  # This is just to play along with the existing code
        analytics = Analytic.objects.all()
        data['html_analytic_list'] = render_to_string('analytics/includes/partial_analytic_list.html', {
            'analytics': analytics
        })
    else:
        context = {'analytic': analytic}
        data['html_form'] = render_to_string('analytics/includes/partial_analytic_delete.html',
            context,
            request=request,
        )
    return JsonResponse(data)

URL.py：

url(r'^dataanalytics/analytics/$', views.analytic_list, name='analytic_list'),
    url(r'^dataanalytics/analytics/create/$', views.analytic_create, name='analytic_create'),
    url(r'^dataanalytics/analytics/(?P<pk>\d+)/update/$', views.analytic_update, name='analytic_update'),
    url(r'^dataanalytics/analytics/(?P<pk>\d+)/delete/$', views.analytic_delete, name='analytic_delete'),

您的表更新似乎正在使用以下内容：

$("#analytic-table tbody").html(data.html_analytic_list);

您需要使用Datatables API来更新Datatables数据。因为您正在直接更新HTML数据表，所以不知道这些更新。一种选择是使用类似于在使用HTML方法更新后让Datatables更新其数据缓存的方法

但是，更好的选择是用于多行或单行

由于数据中似乎有
tr
元素，因此可以分别对一行或多行使用类似的内容：

table.row.add($(data.html_analytic_list)).get(1)).draw();
table.rows.add($(data.html_analytic_list))).draw();

我假设您正在谈论JQuery数据表。你离得太近了，只差一点点！您需要销毁并重新初始化表，无需使用.draw（）。如图所示：

Ajax:

  var saveForm = function () {
    var form = $(this);
    $.ajax({
      url: form.attr("action"),
      data: form.serialize(),
      type: form.attr("method"),
      dataType: 'json',
      success: function (data) {
        if (data.form_is_valid) {
          $("#modal-analytic").modal("hide"); //hide it first if you want
          $("#analytic-table").DataTable().destroy(); //this will flush DT's cache
          $("#analytic-table tbody").html(data.html_analytic_list); // replace the html
          $("#analytic-table").DataTable(); // re-initialize the DataTable
        }
        else {
          $("#modal-analytic .modal-content").html(data.html_form);
        }
      }
    });
    return false;
  };

干得好，祝你好运！迟来的回答，但可能会有帮助

$("#analytic-table tbody").html(data.html_analytic_list);

table.row.add($(data.html_analytic_list)).get(1)).draw();
table.rows.add($(data.html_analytic_list))).draw();

  var saveForm = function () {
    var form = $(this);
    $.ajax({
      url: form.attr("action"),
      data: form.serialize(),
      type: form.attr("method"),
      dataType: 'json',
      success: function (data) {
        if (data.form_is_valid) {
          $("#modal-analytic").modal("hide"); //hide it first if you want
          $("#analytic-table").DataTable().destroy(); //this will flush DT's cache
          $("#analytic-table tbody").html(data.html_analytic_list); // replace the html
          $("#analytic-table").DataTable(); // re-initialize the DataTable
        }
        else {
          $("#modal-analytic .modal-content").html(data.html_form);
        }
      }
    });
    return false;
  };