我正在学习使用数据表的春季启动。 现在我成功地显示从MySQL到jQuery数据表的数据。 现在我创建了 CRUD，但我在学习中的问题是删除数据。
我了解只有表引导在没有数据表的情况下创建 CRUD：
<table class="table table-striped">
<tr>
<th>Id</th>
<th>Product Id</th>
<th>Name</th>
<th>Price</th>
<th>Delete</th>
</tr>
<tr th:each="product : ${products}">
<td th:text="${product.id}"><a href="/product/${product.id}">Id</a></td>
<td th:text="${product.productId}">Product Id</td>
<td th:text="${product.name}">descirption</td>
<td th:text="${product.price}">price</td>
<td><a th:href="${'/product/delete/' + product.id}">Delete</a></td>
</tr>
</table>
容易只在我的 HTML 上声明局部变量 thymeleaf。
如何使用确认对话框从数据表中删除数据？
这是我的代码数据表：
$(document).ready (function() {
var table = $('#productsTable').DataTable({
"sAjaxSource": "/api/products",
"sAjaxDataProp": "",
"order": [[ 0, "asc" ]],
"columns": [
{ "mData": "id"},
{ "mData": "name" },
{ "mData": "price" },
{ "mData": "productId" },
{ "mData": "version" },
{
data: null,
defaultContent: '<a href="" class="remove">Delete</a>',
orderable: false
}
]
});
$('#btnDelete').on( 'click', 'a.remove', function (e) {
e.preventDefault();
editor.remove( $(this).closest('tr'), {
title: 'Delete Product',
message: 'Are you sure you wish to delete this data ?',
buttons: 'Delete'
} );
} );
});
产品.html
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<title>Latihan Spring Boot</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="/js/product.js"></script>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/css/jquery.dataTables.min.css">
</head>
<body>
<div class="container">
<h1 align="center">Products Table</h1>
<p><a class="btn btn-primary">Add Product</a></p>
<table id="productsTable" class="display">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Price</th>
<th>Product ID</th>
<th>Version</th>
<th></th>
</tr>
</thead>
</table>
</div>
</body>
</html>
尝试使用 jQueryconfirm()。
像这样更新您的代码
$('#btnDelete').on( 'click', 'a.remove', function (e) {
e.preventDefault();
if(!confirm("Sure you want to delete!")){
return false;
}
editor.remove( $(this).closest('tr'), {
title: 'Delete Product',
message: 'Are you sure you wish to delete this data ?',
buttons: 'Delete'
} );
} );
});