How to display alert on button click in 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.

nyu.exe · Accepted Answer · 2019-01-09 10:33:14Z

1

Set an event for example in html code: '<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

answered Jan 9, 2019 at 10:33

nyu.exe

3271 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shreyas Pednekar Over a year ago

w3schools js confirm box helped me. Thanks.

nyu.exe Over a year ago

nice to hear that! :)

Alexandre Elshobokshy · Accepted Answer · 2019-01-09 10:38:19Z

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/

uj95 · Accepted Answer · 2019-01-09 10:46:03Z

0

Set onclick attribute when defining the anchor tag.

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

edited Jan 9, 2019 at 10:46

answered Jan 9, 2019 at 10:38

uj95

1332 silver badges7 bronze badges

2 Comments

Alexandre Elshobokshy Over a year ago

This will pop up the confirm dialog but it won't delete anything.

uj95 Over a year ago

Sorry my bad. I edited the answer. Now it's correct right?

Collectives™ on Stack Overflow

How to display alert on button click in JQuery DataTable?

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related