Question

我在jquery数据表中有一些记录，并且每个记录都有删除按钮。我想显示一个警告框“您确定要删除此记录吗？”单击删除按钮，然后再删除值。我该如何实现？

表格设计

<table id="patientTable" class="table-hover table-bordered">
    <thead>
        <tr>
            <th>Patient Name</th>
            <th>Address</th>
            <th>Date</th>
            <th>Description</th>
            <th>Amount</th>
            <th>Edit</th>
            <th>Delete</th>
        </tr>
    </thead>
</table>

jquery代码

@* Load datatable css *@

<link href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" />

@* Load datatable js *@

<script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>

<script>
        $(document).ready(function () {
        $('#patientTable').DataTable({
                "ajax": {
                "url": "/Patient/LoadData",
                "type": "GET",
                "datatype": "json"
                },
                "columns": [
                        { "data": "Name", "autoWidth": true },
                        { "data": "Address", "autoWidth": true },
                        { "data": "Date", "autoWidth": true,
                            "render": function (value) {
                                    if (value === null) return "";
                                    var pattern = /Date\(([^)]+)\)/;
                                    var results = pattern.exec(value);
                                    var dt = new Date(parseFloat(results[1]));
                                    return (dt.getMonth() + 1 + "/" + dt.getDate() + "/" + dt.getFullYear());
                            }
                        },
                        { "data": "Description", "autoWidth": true },
                        { "data": "Amount", "autoWidth": true },
                        { "data": "ID", "width": "50px",
                            "render": function (id) {
                                    return '<a href="/Patient/Edit/' + id + '">Edit</a>';
                            }
                        },
                        { "data": "ID", "width": "50px",
                            "render": function (id) {
                                    return '<a href="/Patient/Delete/' + id + '">Delete</a>';
                            }
                        }
                ]
            });
        });
</script>

请指导我如何显示这样的警报

点击删除按钮上的

我是新的jQuery数据表。预先感谢。

Answer 1

例如使用html代码设置事件：'<a onclick="window.confirm("sometext");" href="/Patient/Delete/' + id + '">Delete</a>'

您可以做的另一件事是将一个类和id放入删除按钮，然后将该事件放入js或jquery：

document.getElementByClassName("myclass").addEventListener("click", function(){
   window.confirm("sometext")
});

或jQuery

$('.myclass').on('click', function(){window.confirm("sometext")});

docs：https://www.w3schools.com/js/js_popup.asp

Answer 2

您只需添加一个删除按钮，并在每次点击时执行一个功能，即可为您进行验证。

例如，您将其添加到每一行

<td><button type="button" name="locateButton1" class="btn btn-info" onClick="deleteRow(this);">Delete</button></td>

并像这样创建deleteRow()函数

function deleteRow(row) {
  if (confirm("Are you sure you want to delete this?") == true) {
    $(row).parent().parent().remove();
  }
}

摘要：

$(document).ready(function() {
  $('#patientTable').DataTable();
});

function deleteRow(row) {
  if (confirm("Are you sure you want to delete this?") == true) {
    $(row).parent().parent().remove();
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" />
<table id="patientTable" class="table-hover table-bordered">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td><button type="button" name="locateButton1" class="btn btn-info" onClick="deleteRow(this);">Delete</button></td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
      <td><button type="button" name="locateButton1" class="btn btn-info" onClick="deleteRow(this);">Delete</button></td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
      <td><button type="button" name="locateButton1" class="btn btn-info" onClick="deleteRow(this);">Delete</button></td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2012/03/29</td>
      <td>$433,060</td>
      <td><button type="button" name="locateButton1" class="btn btn-info" onClick="deleteRow(this);">Delete</button></td>
    </tr>
    <tr>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>2008/11/28</td>
      <td>$162,700</td>
      <td><button type="button" name="locateButton1" class="btn btn-info" onClick="deleteRow(this);">Delete</button></td>
    </tr>
  </tbody>
</table>

提琴：https://jsfiddle.net/Lzce5s0p/

Answer 3

在定义锚标记时设置onclick属性。

<a href="/Patient/delete/' + id + '" onclick="return confirm('Are you sure you want to delete this record?')">Delete</a>

如何在JQuery DataTable中单击按钮时显示警报？

3 个答案: