Как отобразить модальное подтверждение с данными столбцов при нажатии кнопки, используя Datatables - PullRequest
Новая
       66

Как отобразить модальное подтверждение с данными столбцов при нажатии кнопки, используя Datatables

0 голосов
/ 13 февраля 2019

Имея 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 плагин "отзывчивый".

Однако в их примере модальное состояние всегда вызывается нажатием на первый столбец, и они отображают все данные строки, а не конкретные столбцы.

Есть идеи?

1 Ответ

0 голосов
/ 13 февраля 2019

... если я правильно понял ваш вопрос, то, я полагаю, это то, чего вы пытаетесь достичь: 

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