Hi all I have a problem with the table generated with datatable. I created this example table where I would like to have 3 things:
- search for each column
- generic search in the top right corner
- checkbox with specific filters on a column
Also I would like to have the ability to edit the row directly by clicking on the edit icons directly from the table. Taken individually all these things work, the problem arises that every time I click on the checkbox the edit icons "clone" so if I start playing with it a bit I get a lot of icons. I would like to understand how I can fix this bug thanks an advance for the help. Thanks
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<link href="https://cdn.datatables.net/2.0.8/css/dataTables.bootstrap5.min.css" rel="stylesheet" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" href="style/style.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/2.0.8/js/dataTables.min.js"></script>
<script src="https://cdn.datatables.net/2.0.8/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script src="https://markcell.github.io/jquery-tabledit/assets/js/tabledit.min.js"></script>
</head>
<body>
<div class="main">
<div class="title-container">
<h1>Title</h1>
</div>
<div class="users-container">
<h2></h2>
<div class="table-responsive">
<div class="position-relative content">
<div class="position-absolute w-100 row" style="z-index: 50;">
<div class="col-6">
<div class="filter-wrapper">
<input type="radio" class="filter-checkbox" name="filter" data-filter="" value="Tutto" checked="checked" />
All
<input type="radio" class="filter-checkbox" name="filter" data-filter="Antintrusione" value="Antintrusione" />
Cat1
<input type="radio" class="filter-checkbox" name="filter" data-filter="Antincendio" value="Antincendio" />
Cat2
</div>
</div>
</div>
</div>
<br>
<table id="sample_data" class="table table-bordered table-striped">
<thead>
<tr>
<th scope="col">C Name</th>
<th scope="col">C Name</th>
<th scope="col">C Name</th>
<th scope="col">C Name</th>
<th scope="col">C Name</th>
<th scope="col">C Name</th>
<th scope="col">C Name</th>
<th scope="col">C Name</th>
<th scope="col">C Name</th>
<th scope="col">C Name</th>
<th scope="col">C Name</th>
<th scope="col">C Name</th>
<th scope="col">C Name</th>
<th scope="col">C Name</th>
<th scope="col">C Name</th>
<th scope="col">C Name</th>
<th scope="col">C Name</th>
</tr>
</thead>
<tbody> <tr>
<th scope="col">Test</th>
<th scope="col">Test</th>
<th scope="col">Test</th>
<th scope="col">Test</th>
<th scope="col">Test</th>
<th scope="col">Test</th>
<th scope="col">Test</th>
<th scope="col">Test</th>
<th scope="col">Test</th>
<th scope="col">Test</th>
<th scope="col">Test</th>
<th scope="col">Test</th>
<th scope="col">Test</th>
<th scope="col">Test</th>
<th scope="col">Test</th>
<th scope="col">Test</th>
<th scope="col">Test</th>
</tr></tbody>
</table>
<script type="text/javascript" language="javascript" >
$(document).ready(function() {
dataTable = $("#sample_data").DataTable({
"bInfo": false,
"bPaginate": true,
"bLengthChange": false,
"buttons": [],
"ordering": false,
language: {
paginate: {
next: '<i class="px-2 py-1.5 rounded-md border-2 border-black fa-solid fa-chevron-right"></i>',
previous: '<i class="px-2 py-1.5 rounded-md border-2 border-black fa-solid fa-chevron-left"></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 class="bi bi-pencil-fill"></i>',
action: 'edit'
},
delete: {
class: 'btn btn-sm btn-secondary',
html: '<i class="bi bi-trash-fill"></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();
}
}
});
});
});
</script>
</div>
</div>
</div>
</body>
</html>