How To Get A Hidden Id To Delete A Record In A Jquery Datatable
I have Edit and Delete buttons in my jQuery DataTable. The first column is a record ID column and is hidden. I have event handlers for the Edit and Delete buttons. Should I rather
Solution 1:
I would suggest the following approach.
Essential part here is to use rows().remove() method (you don't need to have id's of the records you would like to delete).
However, if you wish to delete those records from your backend storage as well, you might do something like:
$('#delete').on('click', function() {
const selectedRows = dataTable.rows('tr.selected');
$.ajax(/* throw selected rows data (or particular properties) using selectedRows.data() */);
selectedRows.remove().draw();
});
//source dataconst srcData = [
{id: 1, name: 'Steve Rogers', title: 'Captain America'},
{id: 2, name: 'Anthony Stark', title: 'Iron Man'},
{id: 3, name: 'Peter Parker', title: 'Spider Man'},
{id: 4, name: 'Bruce Banner', title: 'Halk'},
{id: 5, name: 'Thor Odinsson', title: 'Thor'}
];
//data table initializationconst dataTable = $('#mytable').DataTable({
data: srcData,
dom: 't',
columns: [
{data: 'id', visible: false},
{data: 'name', title: 'Name'},
//append 'Edit'/'Delete' buttons to the rightmost edge of the cell
{data: 'title', title: 'Title', render: cellData => cellData+'<button class="delete">Delete</button><button class="edit">Edit</button>'}
]
});
//delete button handler
$('#mytable').on('click', '.delete', function () {
//grab parent <tr> node of the button, use it as //a selector to throw its id into message and //delete corresponding dataTable rowconst currentRow = dataTable.row($(this).closest('tr'));
$('#msg').text(`Row id ${currentRow.data().id} (${currentRow.data().title}) was removed`);
currentRow.remove().draw();
});
//edit button handler
$('#mytable').on('click', '.edit', function(){
$(this).closest('tr').toggleClass('editing');
if($(this).closest('tr').hasClass('editing')) {
//turn each table cell into input field
[...$(this).closest('tr').find('td')].forEach(function(td, colindex){
$(td).html(`<input value="${dataTable.cell(td).data()}"></input> ${colindex==this.length-1?'<button class="delete">Delete</button><button class="edit">Edit</button>':''}`)
}, $(this).closest('tr').find('td'));
}
else {
//grab input fields from within each cell and //put their values into corresponding dataTable cell
[...$(this).closest('tr').find('td')].forEach(function(td, colindex){
const cellValue = $(td).find('input').val();
dataTable.cell(td).data(cellValue);
$(td).html(`${cellValue}${colindex==this.length-1?'<button class="delete">Delete</button><button class="edit">Edit</button>':''}`);
}, $(this).closest('tr').find('td'));
dataTable.draw();
}
});tdbutton {
display: block;
float: right;
}<!doctype html><html><head><scripttype="application/javascript"src="https://code.jquery.com/jquery-3.3.1.min.js"></script><scripttype="application/javascript"src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script><linktype="text/css"href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"></head><body><tableid="mytable"></table><divid="msg"></div></body></html>Solution 2:
By using the $('#personTable tbody').on('click', '.btn-edit2', function () I can get the index of the row and the hidden cell value orID for use in serverSide - Db - Processing.
Post a Comment for "How To Get A Hidden Id To Delete A Record In A Jquery Datatable"