DjangoでAjaxを使用してデータテーブルを更新する方法

Question

私はajaxを使ってCRUD操作を実行するテーブルを持っていますが、私はajaxを初めて使っています。 jqueryデータテーブルを使用してテーブルをインタラクティブにしましたが、正しく動作しません。テーブルにデータを追加して編集することはできますが、データを並べ替えると、ページをリロードするまで、新しい/更新されたデータは消えます。

私は問題が何であるか知っていると思いますが、私は解決できませんでした。私は単に私として成功機能にmyTable.draw('full-reset');などmyTable.ajax.reload();を追加しようとした上記で views.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> 

this answerに見えましたが、結果は変わりませんでした。私も試しましたmyTable.row.add(case_formset.serialize()).draw();置き換え$("#case-table tbody").html(data.html_case_list);

ドキュメントは単純な例ですが、例は静的な.txtファイルで、私のデータはcontext_dictからのものであり、上記のデータを "ajax"として渡す方法は見当たりません。動的です。

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

次に、this postは役に立ちますが、私はいくつかの点で混乱しています。

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

URLはどのようなものです：同様に、それは以下の例を与えるドキュメントに
？それはページにデータを表示する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; 

    };