Question

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

table.html （上下文：{'entities'：实体，'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').click(function(){
    $.ajax({
        url: '/lock/url/',
        type: 'POST',
        data: {'lock': true}
    })
});

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

Answer 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 ：{'数据'：['some_id'，'some_name'，'some_status'，'some_description'，'some_action']，[...]，[ ...]，}

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

Django JQuery数据表Ajax刷新-缺少排序按钮和无效的函数调用

1 个答案: