Django JQuery 数据表 ajax 刷新 - 缺少排序按钮和非活动函数调用答案

【问题标题】：Django JQuery datatable ajax refresh - missing sorting buttons and inactive function callsDjango JQuery 数据表 ajax 刷新 - 缺少排序按钮和非活动函数调用
【发布时间】：2019-04-06 08:57:45
【问题描述】：

我正在运行 Django 并使用 JQuery 和 jquery-datatables-bs3 为我的模型创建一个表。用户可以添加和删除表行，这对应于在数据库中创建或删除的模型实例。每行都有一个“操作”列，其中包含一个可点击的函数调用。我在每次用户修改后使用 ajax 调用来刷新表。

table.html（上下文：{'entities': entity, 'display_fields': display_fields }）

<table class="table table-bordered table-striped" id="datatable-editable">
    <thead>
        <tr>
            {% for key in display_fields.keys %}
                <th>{{ key }}</th>
            {% endfor %}
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        {% for entity in entities %}
        <tr>
            {% for key, value in entity.display_fields.items %}
                <td>{{ value }}</td>
            {% endfor %}
            <td class="actions">
                <a href="#" class="locker"></a>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>

结果：

桌子工作正常。排序和可点击操作调用工作正常。到目前为止没有问题。刷新时：

update.js（对表修改的ajax调用）

function refresh_table() {
    $.ajax({
       url: '/refresh/url/',
          success: function(data) {
            $('#datatable-editable').html(data);
          }
    });
}

刷新工作，表格重新填充数据。但是，一旦刷新，表格就会丢失其标题排序按钮，并且操作函数调用不再起作用，即使表格的 HTML 相同：

update.js（点击功能上的“locker”类）

$('.locker').click(function(){
    $.ajax({
        url: '/lock/url/',
        type: 'POST',
        data: {'lock': true}
    })
});

我认为刷新标题是必要的，并且 update.js 没有在更新的 HTML 中选择新的“.locker”类，但我不确定如何解决这个问题。关于如何重新启用表格排序按钮和表格行函数调用的任何想法？非常感谢，谢谢！

【问题讨论】：

您使用某种代码使用其 id 或类为您的表初始化数据表，我想您需要在 ajax 成功时再次这样做。
感谢您的评论，我刷新表格数据的整个方法都是错误的 - 详情请参阅下面的答案。

标签： jquery ajax django html datatables

【解决方案1】：

我的错误是我试图通过 .html(data) 设置表格数据，更新（绘制）每个新表格行的正确方法应该是这样的：

function refresh_table() {
    // get the table:
    if ( $.fn.dataTable.isDataTable( '#datatable-editable' ) ) {
        table = $('#datatable-editable').DataTable();
    }
    else {
        table = $('#datatable-editable').DataTable( {
            paging: false
        } );
    }

    // ajax refresh call:
    $.ajax({
        url: '/refresh/url/',
            success: function(json) {
            // clear table data first:
            table.clear();

            // insert new row data, assuming that json.data is an array of arrays of row values:
            for (var i = 0; i < json.data.length; i++) {
                    table.row.add(json.data[i]).draw();

            }
        }
    });
}

示例 Ajax 调用返回 JSON：{'data': ['some_id', 'some_name', 'some_status', 'some_description', 'some_action'], [...], [ ...]，}

我发现这个答案非常有用：How to destroy first initialization of datatable (DataTable inside a modal)

【讨论】：