春のブートthymeleafとdatatablesのデータを削除する

私はデータシートで春のブートを学んでいます。 MySQLからjqueryデータテーブルへのデータの表示が成功しました。今私はCRUDを作成するが、この学習の私の問題は、データを削除することです。春のブートthymeleafとdatatablesのデータを削除する

私はテーブルと理解していますがDataTableのなしで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簡単。

確認ダイアログでデータテーブルからデータを削除する方法はありますか？

この私のコードのDataTable：

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

出典

2017-07-12 Deki Kurnia Hadi Permana

は、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' 
     }); 
    }); 

});

出典

2017-07-12 11:49:12

よう

更新あなたのコード。つまり、私のコードのようにdatatablesからデータを削除するにはどうすればいいのですか？確認ダイアログを使って、thymeleaf（私のトップコード）だけです。私は混乱しています。 'defaultContent：' Delete '' –

私はあなたをかなり理解していると思います。しかし、もしあなたがちょうどthymleafで同じことをしたいならば。削除機能を作成して、Thymleafから生成されたHTMLリストからトリガーすることができます。データ型なしの場合は –

、データ型を使用しない場合は、データ型がありません。ここで私は 'defaultContent： 'Delete'を混乱させました。どのようにIDを取得するためにこのようなコードを削除する 'Delete ' –

春のブートthymeleafとdatatablesのデータを削除する

答えて

関連する問題