代码之家 › 专栏 › 技术社区 › en Peris

数据表:删除客户端的行

datatables spring-boot database jquery html

en Peris · 技术社区 · 4 年前

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

但当我点击时,它会让服务器提交表单

1 回复 | 直到 4 年前

en Lopes 4 年前

试试这个:

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

Dharman thijsvdp 4 年前

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

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

你不用说 === true ,您只需要给出变量的名称,因为如果您给出名称,它默认为true,您只需说 === false 对于else if语句。

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