Spring boot SpringBootEleAF和datatables删除数据_Spring Boot_Datatables_Thymeleaf

Spring boot SpringBootEleAF和datatables删除数据

spring-boot datatables

Spring boot SpringBootEleAF和datatables删除数据,spring-boot,datatables,thymeleaf,Spring Boot,Datatables,Thymeleaf,我正在学习使用datatables的spring boot。现在im成功地将数据从MySQL显示到jquery数据表。现在我创建CRUD，但我在学习中遇到的问题是删除数据我理解只有表引导才能创建不带数据表的CRUD： <table class="table table-striped"> <tr> <th>Id</th> <th>Product Id</th>

我正在学习使用datatables的spring boot。现在im成功地将数据从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>

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

});


身份证件
产品Id
名称
价格
删除
产品Id
描述
价格

仅在我的html上声明局部变量thymeleaf

如何使用确认对话框从数据表中删除数据

这是我的代码数据表：

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

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

});

$（文档）.ready（函数（）{
变量表=$（'#productsTable'）。数据表({
“sAjaxSource”：“/api/产品”，
“sAjaxDataProp”：“，
“订单”：[[0，“asc”]]，
“栏目”：[
{“mData”：“id”}，
{“mData”：“name”}，
{“mData”：“price”}，
{“mData”：“productId”}，
{“mData”：“version”}，
{
数据：空，
defaultContent:“”，
可订购：false
}
]
});
$（'btnDelete'）。在（'click'，'a.remove'，函数（e）{
e、 预防默认值（）；
editor.remove（$（this.closest（'tr'）{
标题：“删除产品”，
消息：“您确定要删除此数据吗？”，
按钮：“删除”
} );
} );
});

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>


拉提汗弹簧靴
产品表
添加产品
身份证件
名称
价格
产品ID
版本

尝试使用jQuery

像这样更新代码

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

});

我不是这个意思。我的意思是，如何从数据表中删除数据，比如我的代码没有数据表，只有ThymileAF（我的顶级代码）和确认对话框：D。在这里的第行，我混淆了“defaultContent:”“我想我不太理解你。但是如果你只想对百里香叶做同样的事情。您可以创建一个delete函数，并从生成的HTML列表中触发它。如果没有datatables im subscriptad，但使用datatables im not subscriptad。这里我很困惑

默认内容：'

。如何通过id删除这样的代码