How to get a hidden Id to delete a record in a jQuery Datatable

前端未结

关注

 2  855

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 rath

相关标签:

2条回答

名媛妹妹

2021-01-26 16:26

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...

悲&欢浪女

2021-01-26 16:27

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 data
const 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 initialization
const 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 row
	const 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();
	}
});

td button {
 display: block;
 float: right;
}

<!doctype html><html><head><script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script><link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"></head><body><table id="mytable"></table><div id="msg"></div></body></html>

0 讨论(0)