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

问题描述 投票：0回答：1

拥有下面的DataTable，我想在点击按钮时显示动态弹出窗口或模态，这将作为确认模式。

模态应包含来自单击按钮的受尊重行中的列的数据。 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>

}

我在DataTables网站上看到过“响应式”插件。

但是，在他们的示例中，总是通过单击第一列来触发模态，它们显示行的所有数据，而不是特定列。

任何的想法 ？

javascript jquery datatables modal-dialog confirm
1个回答
2
投票

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

srcData = [
  {name: 'Albert', lastname: 'Einstein', email: '[email protected]', code: 'XOIUE#WL'},
  {name: 'Nikola', lastname: 'Tesla', email: '[email protected]', code: 'OUWelks'},
  {name: 'Rudolf', lastname: 'Hertz', email: '[email protected]', code: 'joi23.xs'},
  {name: 'James', lastname: 'Maxwell', email: '[email protected]', 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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.