Как отобразить предупреждение о нажатии кнопки в JQuery DataTable?

Question

У меня есть несколько записей в jquery datatable, и у меня есть кнопка удаления для каждой записи. Я хочу отобразить окно с предупреждением "Вы действительно хотите удалить эту запись?" по нажатию кнопки удаления перед удалением значения. Как мне этого добиться?

дизайн стола

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

Код запроса

@* 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 Datatable. Заранее спасибо.

Answer 1

Вы можете просто добавить кнопку удаления и выполнять функцию при каждом клике, которая проверяет ее для вас.

Так, например, вы бы добавили это в каждую строку

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

Установить атрибут onclick при определении тега привязки.

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

Answer 3

Установить событие, например, в HTML-код: '<a onclick="window.confirm("sometext");" href="/Patient/Delete/' + id + '">Delete</a>'

Другая вещь, которую вы могли бы сделать, это поместить класс и идентификатор в кнопки удаления, а затем поместить событие в js или jquery:

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

ИЛИ JQuery

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

документы: https://www.w3schools.com/js/js_popup.asp