Datatables在每行数据后添加删除按钮,并与后端实现真实删除数据
时间: 2024-03-08 16:49:22 浏览: 132
要实现这个功能,你需要在前端添加删除按钮,并在单击按钮时向后端发送请求来删除相应的数据。以下是示例代码:
```javascript
$(document).ready(function() {
var table = $('#example').DataTable( {
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "age" },
{ "data": "start_date" },
{ "data": "salary" },
{
"data": null,
"render": function ( data, type, row ) {
return '<button class="btn btn-danger btn-sm delete-row">删除</button>';
}
}
]
} );
// 监听删除按钮的点击事件
$('#example tbody').on('click', '.delete-row', function () {
// 获取所在行的数据
var data = table.row( $(this).parents('tr') ).data();
// 向后端发送删除请求
$.ajax({
url: '/delete',
type: 'POST',
data: { id: data.id }, // 假设数据源中有一个"id"字段
success: function(result) {
// 删除成功后,重新加载表格数据
table.ajax.reload();
}
});
} );
} );
```
在上面的代码中,我们添加了一个`delete-row`类的删除按钮,然后在表格初始化之后,使用`on`方法监听按钮的点击事件。当按钮被单击时,我们获取所在行的数据,然后向后端发送一个删除请求,请求中包含要删除的数据的ID。在请求成功后,我们重新加载表格数据,以便在前端中删除相应的行。
在后端实现删除数据的逻辑是在你的服务器端代码中完成的,你需要根据你的后端技术选择相应的方法来实现。无论你使用的是什么后端技术,你需要在后端接收到删除请求后,从相应的数据源中删除相应的数据。在删除完成后,你可以将删除结果返回给前端,以便在前端中进行相应的处理。
阅读全文