Question

我用数据表学习弹簧启动。现在我成功地将数据显示从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'
        } );
    } );

});

products.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>

Answer 1

尝试使用jQuery confirm()。

像这样更新你的代码

$('#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'
        } );
    } );

});

Spring boot百万美元和数据表删除数据

1 个答案: