Search code examples
javascriptjquerydatatablesmodal-dialogconfirm

How to display a confirmation Modal with columns data on button click using Datatables

Having the DataTable below, I would like to display a dynamic popup or modal whenever a button is clicked which will serve as a confirmation modal.

The modal should contain data coming from the columns in the respected row in which the button was clicked. enter image description here

@section scripts
{
  <script>
    $(document).ready(function() {      
        var table = $('#visitorsTable').DataTable({
            "ajax": {
                ...
            },
            "columns": [
                { "data": "FirstName" },
                { "data": "LastName" },                    
                { "data": "Email" },
                { "data": "PhoneNumber" },                    
                { "data": "WifiCode" },                                        
            ],
            columnDefs: [
                {
                    targets: [4],
                    render: function(wifiCode, b, data, d) {
                        if (wifiCode) {
                            var content = '<span>' + wifiCode + '</span>';
                            if (data.Email && data.PhoneNumber) {
                                content +=
                                        '<button type="button" class="btnResendByMail>Email</button>'
                                return content;
                            }                                 
                    }
                }
            ]
        });

        $(document).on('click',
        '.btnResendByMail',
        function() {                   
            $.ajax({
                ....                        
            });
        });           
    });
</script>

}

I've seen on DataTables site the "responsive" plugin.

However, on their example the modal is triggered always by clicking on the first column, and they display all the data of the row, not specific columns.

Any idea ?

Solution

  • ...if I got your question properly, I believe, that's what you're trying to achieve:

    srcData = [
  {name: 'Albert', lastname: 'Einstein', email: 'emc2@gmail.com', code: 'XOIUE#WL'},
  {name: 'Nikola', lastname: 'Tesla', email: 'firebolt@hotmail.com', code: 'OUWelks'},
  {name: 'Rudolf', lastname: 'Hertz', email: 'radiohead@yahoo.com', code: 'joi23.xs'},
  {name: 'James', lastname: 'Maxwell', email: 'magneto@gmail.com', code: 'Moiu23s'},
];

var dataTable = $('#mytable').DataTable({
  sDom: 't',
  data: srcData,
  columns: [
    {title: 'Name', data: 'name'},
    {title: 'Lastname', data: 'lastname'},
    {title: 'e-mail', data: 'email'},
    {
      title: 'Wi-Fi code', 
      data: 'code',
      render: (data) => data+'<button style="float:right">e-mail</button>'
    }
  ]
});

$('#mytable').on('click', 'button', event => {
  let rowData = dataTable.row($(event.target).closest('tr')).data();
  alert(`Are you sure you wanna send wi-fi code "${rowData.code}" to that sneaky bastard ${rowData.name} on his e-mail (${rowData.email})?`);
});
    <!doctype html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
  <table id="mytable"></table>
</body>
</html>