Я определяю таблицу при загрузке страницы:
$('#myTable').DataTable({
paging: true,
sort: true,
searching: true,
columns: [
{ other columns...},
{ 'data': 'Actions' },
],
dom: '<"toolbar">frtip'
});
на основе выбора пользователя, выполняется вызов ajax и данные добавляются в таблицу, а кнопка «удалить» добавлено в каждую строку:
if ($.fn.DataTable.isDataTable('#myTable')) {
$('#myTable').DataTable().destroy();
}
$('#myTable').DataTable({
data: response,
paging: true,
sort: true,
searching: true,
columns: [
{ other columns...},
{
'data': null,
'render': function (data, type, row, meta) {
return '<button type="button" class="btn btn-outline-danger deleteRow">Disable</button>'
}
},
],
dom: '<"toolbar">frtip'
});
Пользователь может нажать кнопку над таблицей, чтобы добавить новую строку. В этой строке я хотел бы отобразить кнопки отмены / сохранения в столбце действий, которые я определяю следующим образом:
$(document).on('click', 'button#createNew', function () {
var table = $('#myTable').DataTable();
table.row.add({
...other columns...,
Actions: `
<button type="button" class="btn btn-outline-secondary btn-sm cancelRow">Cancel</button>
<button type="button" class="btn btn-success btn-sm addRow ml-1">Add</button>
`
}).draw();
});
Проблема:
данные прекрасно загружаются из вызова ajax, и кнопка удаления есть и работает, как ожидалось. Однако, когда вы нажимаете кнопку, чтобы создать новую строку, она создает строку, но с кнопкой удаления вместо кнопок отмены / сохранения.
Что я делаю не так?
Вкл. возможно, не связанное примечание, я хотел бы иметь возможность определить параметры для таблицы данных один раз, а затем просто использовать ссылку, а не уничтожать и воссоздавать ее, но я не уверен, возможно ли это с добавлением / удаление кнопок.