如何在 Django 中使用 Ajax 更新数据表

Question

我有一个使用 ajax 执行 CRUD 操作的表，但我是 ajax 新手。我已使该表与 jquery 数据表交互，但它无法正常工作。我可以在表格中添加和编辑数据，它会出现，但是当我对数据进行排序时，新/更新的数据会消失，直到我重新加载页面。

我想我知道问题出在哪里，但我一直没能解决它。 视图.py

def case_list(request):
    cases = Case.objects.filter(user=request.user).order_by('date_due')
    return render(request, 'cases/case_list.html', {'cases': cases})

cases.js

$(function () {

  /* Functions */

  var loadForm = function () {
    var btn = $(this);
    $.ajax({
      url: btn.attr("data-url"),
      type: 'get',
      dataType: 'json',
      beforeSend: function () {
        $("#modal-case").modal("show");
      },
      success: function (data) {
        $("#modal-case .modal-content").html(data.html_form);
      }
    });

  };

  var saveForm = function () {
    var case_formset = $(this);
    $.ajax({
      url: case_formset.attr("action"),
      data: case_formset.serialize(),
      type: case_formset.attr("method"),
      dataType: 'json',
      success: function (data) {

        if (data.form_is_valid) {
          $("#case-table tbody").html(data.html_case_list);
          $("#modal-case").modal("hide");
          myTable.draw('full-reset');
        }
        else {
          $("#modal-case .modal-content").html(data.html_form);
        }

      }
    })

    return false;

  };


  /* Binding */

  // Create case
  $(".js-create-case").click(loadForm);
  $("#modal-case").on("submit", ".js-data-create-form", saveForm);

  // Update case
  $("#case-table").on("click", ".js-update-case", loadForm);
  $("#modal-case").on("submit", ".js-case-update-form", saveForm);

  // Delete case
  $("#case-table").on("click", ".js-delete-case", loadForm);
  $("#modal-case").on("submit", ".js-case-delete-form", saveForm);

});

list.html

<script type="text/javascript">
$(document).ready(function(){

    var myTable = $('#case-table').DataTable({
        });

});
</script>


h1 class="page-header">Cases</h1>

  <p>
    <button type="button" class="btn btn-primary js-create-case" data-url="{% url 'case_create' %}">
      <span class="glyphicon glyphicon-plus"></span>
      New case
    </button>
  </p>

  <table class="table" id="case-table">
    <thead>
      <tr>
        <th>Date due</th>

        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for case in cases %}
  <tr class = 'click-row'>
    <td><a href="{% url 'edit_case' case.slug %}" ></a>{{ case.date_due }}</td>   
    <td style="width: 150px">
      <button type="button"
              class="btn btn-warning btn-sm js-update-case"
              data-url="{% url 'case_update' case.id %}">
        <span class="glyphicon glyphicon-pencil"></span> Edit
      </button>
      <button type="button"
              class="btn btn-danger btn-sm js-delete-case"
              data-url="{% url 'case_delete' case.id %}">
        <span class="glyphicon glyphicon-trash"></span> Delete
      </button>
    </td>
  </tr>

{% endfor %}
    </tbody>
  </table>

  <div class="modal fade" id="modal-case">
    <div class="modal-dialog">
      <div class="modal-content">

      </div>
    </div>
  </div>

在上面我尝试在成功函数中简单地添加myTable.draw('full-reset'); 和myTable.ajax.reload();，正如我在this answer 中看到的那样，但它并没有改变结果。我也试过myTable.row.add(case_formset.serialize()).draw();替换$("#case-table tbody").html(data.html_case_list);

文档有一个简单的示例，但我看不到如何将上述数据作为“ajax”传递，因为该示例是静态 .txt 文件，而我的数据来自 context_dict 并且是动态的。

$(document).ready(function() {
    $('#example').DataTable( {
        "ajax": '../ajax/data/arrays.txt'
    } );
} );

然后this post 似乎很有帮助，但我在几点上感到困惑。
与文档类似，它给出了以下示例：

$(document).ready(function() {
    $('#example').dataTable( {
        "ajax": 'your url here'
    });
});

网址是什么？它是显示数据的页面的 url 吗？

它也显示

"ajax": ...,
"columns": [
    { "data": "email" },
    { "data": "platform" },
    { "data": "coins" },
    ...
]

我的数据会是我的上下文字典案例吗？我觉得这应该很容易解决，但我很难过。

感谢您的任何意见。

Answer 1

    var saveForm = function () {
    var case_formset = $(this);
    $.ajax({
      url: case_formset.attr("action"),
      data: case_formset.serialize(),
      type: case_formset.attr("method"),
      dataType: 'json',
      success: function (data) {

        if (data.form_is_valid) {
          $("#case-table tbody").html(data.html_case_list);
          $("#modal-case").modal("hide");
              myTable.ajax.reload();
        }
        else {
          $("#modal-case .modal-content").html(data.html_form);
        }

      }
    })

    return false;

  };