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

Question

I have some records in jquery datatable and I have delete button for every record. I want to display an alert box "Are you sure want to delete this record?" on click of delete button before deleting the value. How can I achieve this?

table design

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

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

Please guide me how to display alert like this

on click of delete button I'm new jquery datatable. Thanks in advance.

Answer 1

Set an event for example in html code: '<a onclick="window.confirm("sometext");" href="/Patient/Delete/' + id + '">Delete</a>' '<a onclick="window.confirm("sometext");" href="/Patient/Delete/' + id + '">Delete</a>'

Other thing you could do is put a class and id in delete buttons and then put the event in js or jquery:

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

OR jQuery

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

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

Answer 2

You can simply add a delete button and execute a function on each click that verifies it for you.

So for example you'd add this to each row

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

And create a deleteRow() function like so

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

Snippet :

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

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