数据表：在客户端删除行

如何解决数据表：在客户端删除行

我有一个使用数据表的 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>

但是当我点击它会使服务器提交表单

解决方法

不管在所有编程语言中的场景如何，最简单的方法就是创建一个变量和一个 if 语句。在开始时创建一个布尔变量并将值设置为 false。无论何时你想显示或不显示它，只需创建一个 if 语句说

if(<name of variable>){
  display()
}else{
  dontDisplay()
}

你不必说=== true，你只需要给出变量的名字，因为如果你给出的名字默认为true，你只需要为else if语句说=== false .

这一直有效，您还可以在许多情况下消除误报、否定或双重警报。

,

试试这个：

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