如何使用数据表在单击按钮时显示带有列数据的确认模式

Question

有了下面的数据表，我想在单击按钮时显示动态弹出窗口或模式，这将用作确认模式。

模式应包含来自单击按钮的相关行中的列的数据。

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

}

我在 DataTables 网站上看到了 "responsive" 插件。

但是，在他们的例子中，模式总是通过点击第一列来触发，并且他们显示该行的所有数据，而不是特定的列。

有什么想法吗？

Answer 1

...如果我正确地回答了你的问题，我相信这就是你想要实现的目标：

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>

如何使用数据表在单击按钮时显示带有列数据的确认模式

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

javascript

jquery

confirm

modal-dialog

datatables