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.

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

回答1:

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

来源：https://stackoverflow.com/questions/54673651/how-to-display-a-confirmation-modal-with-columns-data-on-button-click-using-data

标签

javascript

jquery

datatables

modal-dialog

confirm