Редактировать клоны ключей при каждом нажатии на входной фильтр ⇐ Jquery

[Anonymous]

Привет всем, у меня проблема с таблицей, созданной с помощью datatable. Я создал этот пример таблицы, в которой мне хотелось бы иметь три вещи:

• поиск по каждому столбцу
• общий поиск в верхний правый угол
• флажок с определенными фильтрами в столбце

Также я хотел бы иметь возможность отредактируйте строку напрямую, щелкнув значки редактирования прямо в таблице. Если рассматривать все эти вещи по отдельности, то возникает проблема: каждый раз, когда я нажимаю на флажок, значки редактирования «клонируются», поэтому, если я начну с этим немного играть, я получу много значков. Я хотел бы понять, как я могу исправить эту ошибку, заранее спасибо за помощь. Спасибо

Код: Выделить всё

Admin


















Title







[i]
All

Cat1

Cat2








C Name
C Name
C Name
C Name
C Name
C Name
C Name
C Name
C Name
C Name
C Name
C Name
C Name
C Name
C Name
C Name
C Name


                          
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test



$(document).ready(function() {
dataTable = $("#sample_data").DataTable({
"bInfo": false,
"bPaginate": true,
"bLengthChange": false,
"buttons": [],
"ordering": false,

language: {
paginate: {
next: '[/i]',
previous: '[i][/i]'
}
},

initComplete: function () {
this.api()
.columns()
.every(function () {
let column = this;
let title = column.header().textContent;

// Create input element
let input = document.createElement('input');
input.placeholder = title;
column.header().replaceChildren(input);

// Event listener for user input
input.addEventListener('keyup', () =>  {
if (column.search() !== this.value) {
column.search(input.value).draw();
}
});
});
}
});

$(".filter-checkbox").on("change", function(e) {
let searchTerm = $('input[name="filter"]:checked').attr("data-filter");
dataTable.column(2).search(searchTerm, false, false, true).draw();
});

$('#sample_data').on('draw.dt', function(){
$('#sample_data').Tabledit({

buttons: {
edit: {
class: 'btn btn-sm btn-secondary',
html: '[i][/i]',
action: 'edit'
},
delete: {
class: 'btn btn-sm btn-secondary',
html: '[i][/i]',
action: 'delete'
}
},

columns:{
identifier : [0, 'ProdottiID'],
editable:[[1, 'Name'], [2, 'Name'], [3, 'Name'], [4, 'Name'], [5, 'Name'], [6, 'Name'], [7, 'Name'], [8, 'Name'], [9, 'Name'], [10, 'Name'], [11, 'Name'], [12, 'Name'], [13, 'Name'], [14, 'Name'], [15, 'Name'], [16, 'Name', '{"1": "YES", "2": "NO"}']]
},
restoreButton:false,
onSuccess:function(data, textStatus, jqXHR)
{
if(data.action == 'delete')
{
$('#' + data.id).remove();
$('#sample_data').DataTable().ajax.reload();
}
}
});
});

});

Подробнее здесь: https://stackoverflow.com/questions/786 ... put-filter