使用来自 Django 的 JsonResponse 更新 DataTable 无法正常工作

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>

results_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 响应，当我这样做时，我得到“警告：DataTable 在第 0 行第 0 列遇到意外参数 '0'”，即使来自 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。如果有人知道它，请随时将其发布为答案，但现在这个解决方法对我有好处！