Django JQuery datatable ajax обновление - отсутствующие кнопки сортировки и неактивные вызовы функций

Question

Я использую Django и использую JQuery и jquery-datatables-bs3 для создания таблицы для моих моделей. Пользователь может добавлять и удалять строки таблицы, которые соответствуют экземплярам модели, создаваемым или удаляемым в базе данных. В каждой строке есть столбец «Actions», содержащий вызываемый вызов функции. Я использую ajax-вызов для обновления таблицы после каждой пользовательской модификации.

table.html (контекст: {'entity': 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 не собирает новые классы .locker в обновленном HTML, но я не уверен, как решить эту проблему. Любые идеи о том, как повторно включить кнопки сортировки таблицы и вызовы функций строки таблицы? Большое спасибо, спасибо!

Answer 1

Моя ошибка заключалась в том, что я пытался установить данные таблицы с помощью .html (данные), правильный способ обновления (рисования) каждой новой строки таблицы должен выглядеть следующим образом:

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'], [...], [. ..],}

Я нашел этот ответ действительно полезным: Как уничтожить первую инициализацию datatable (DataTable внутри модального)