html - 数据表：在客户端删除行

Question

我有一个使用数据表的 SpringBoot 应用程序，这里是模板上的数据表

   <table id="example" class="display" style="width:100%">
                    <thead>
                    <tr>
                        <th>Position</th>
                        <th>Actions1</th>
                        <th>Actions2</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tbody>
                    <tr th:each="pic: ${pics}" >
                        <td class="col_name" >
                            <div class="box small">
                                <img th:src="${pic}"/>
                            </div>
                        </td>
                        <td class="col_actions">
                            <a style="color:#808080; margin-right: 10px;">
                                <input type="radio" name="${pic}"  th:field="*{nadal}" th:value="${pic}" >Nadal<br>
                            </a>
                        </td>
                        <td><button>Delete</button></td>
                    </tr>
                    </tbody>
                    <tfoot>
                    <tr>
                        <th>Position</th>
                        <th>Actions1</th>
                        <th>Actions2</th>
                    </tr>
                    </tfoot>
                </table>

和同一页面上的javascript代码：

<script type="text/javascript">
  $(document).ready(function() {
    $('#example').DataTable({
      searching: false,
      paging: false
    }).on("click", "button", function(){
      alert('deleting row');
      console.log($(this).parent());
      table.row($(this).parents('tr')).remove().draw(false);
    });
  });
</script>

但是当我点击它时，它会提交表单的服务器

标签： htmljquerydatabasespring-bootdatatables

Answer 1

尝试这个：

<script type="text/javascript">
  $(document).ready(function() {
    const table = $('#example').DataTable({
      searching: false,
      paging: false
    }).on("click", "button", function () {
      alert('deleting row');
      console.log($(this).parent());
      table.row($(this).parents('tr')).remove().draw(false);
    });
  });
</script>