使用來自 Django 的 JsonResponse 更新數據表無法正常工作

Question

我有一個 Django 應用程序和一個頁面，其中數據被寫入我使用 DataTables 樣式化的表中。 我有一個非常簡單的問題，但事實證明，要弄清楚它非常復雜。 我有一個下拉過濾器，用戶可以在其中選擇一個選項，單擊過濾器，然后 ajax 請求更新表的 html，而無需重新加載頁面。 問題是，這不會更新 DataTable。

我的html：

<table class="table" id="results-table">
    <thead>
        <tr>
            <th scope="col">COL 1</th>
            <th scope="col">COL 2</th>
            <th scope="col">COL 3</th>
            <th scope="col">COL 4</th>
            <th scope="col">COL 5</th>
        </tr>
    </thead>
    <tbody class="table_body">
        {% include 'results/results_table.html' %}
    </tbody>
</table>

結果表.html：

{% for result in result_set %}
<tr class="result-row">
  <td>{{ result.col1 }}</td>
  <td>{{ result.col2 }}</td>
  <td>{{ result.col3 }}</td>
  <td>{{ result.col4 }}</td>
  <td>{{ result.col5 }}</td>
</tr>
{% endfor %}

javascript:

function filter_results() {
    var IDs = [];
    var IDSet = $('.id-select');
    for (var i = 0; i < IDSet.length; i++) {
      var ID = getID($(IDSet[i]));
      IDs.push(ID);
    }
    // var data = [];
    // data = $.ajax({
    //   url:"filter_results/" + IDs + "/",
    //   dataType: "json",
    //   async: false,
    //   cache: false,
    //   data: {},
    //   success: function(response) {
    //     $('#results-table').html(response);
    //     // console.log(response.length);
    //     // console.log(typeof response);
    //     //
    //   }
    // }).responseJSON;
    var dataTable = $('#results-table').DataTable();
    dataTable.clear();
    $('.table_body').html('').load("filter_results/" + IDs + "/", function() {
      alert("Done");
    });
    dataTable.draw();
  }

和意見：

def filter_results(request, ids):
    ids = [int(id) for id in ids.split(',')]
    account_set = Account.objects.filter(id__in=ids)
    form = ResultsFilterForm()
    result_set = Result.objects.filter(account__in=account_set)
    context = {
        'form': form,
        'result_set': result_set
    }
    return render(request, 'results/results_table.html', context)

發生的事情是 Ajax 正確更新了我在 HTML 頁面上看到的內容，但沒有更新實際的數據表。 所以我可以過濾一個特定的 ID，例如，它有 2 個結果，這將起作用並在 HTML 頁面上向我顯示兩個結果，而無需重新加載它。 但是，DataTable 仍然包含其余的結果，因此當只有 2 個結果時，仍然像“下一個”頁面一樣沒有意義。

我還嘗試更改視圖以返回帶有從 JS 中注釋掉的代碼的 JSON 響應，當我這樣做時，即使數據來自Django 是 JSON 格式的正確數據。

真的卡在這里，感謝幫助。

Answer 1

我想出了一個辦法讓它發揮作用。 雖然可能不是做到這一點的“最佳”方式，但它很簡單，所以我希望這對其他人有所幫助。 更改 JavaScript 如下：

function filter_results() {
$('#results-table').DataTable().destroy();
    var IDs = [];
    var IDSet = $('.id-select');
    for (var i = 0; i < IDSet.length; i++) {
      var ID = getID($(IDSet[i]));
      IDs.push(ID);
    }
    $('.table_body').html('').load("filter_results/" + IDs + "/", function() {
      $('#results-table').DataTable();
    });
  }

就是這樣。 我需要做的就是在 filter_results 函數的開頭銷毀舊的 DataTable，然后重新創建它。 但是請注意，重新創建是在調用.load()之后執行的函數。 如果你不這樣寫，那么在html加載完成之前JS重新創建DataTable就會出現問題，這是我遇到的一個問題。 將該函數嵌套在.load()調用中是一個簡單的解決方法。

我知道可能有更好的方法來做到這一點，它涉及更新而不是破壞和重新創建 DataTable。 如果有人知道它，請隨時將其發布為答案，但現在這種解決方法對我有好處！