Отображать форму в модале начальной загрузки по нажатию кнопки, используя Datatables - PullRequest
Новая
       16

Отображать форму в модале начальной загрузки по нажатию кнопки, используя Datatables

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

Наличие JQuery Datatable (это более сложно, я упростил его), как показано ниже:

JQuery Datatable

Мне нужно отобразить модальную форму начальной загрузки с текстомполе ввода включено, всякий раз, когда я нажимаю кнопку «Назначить карту».

Модальное поле должно заполняться данными, поступающими из строки, в которой была нажата кнопка.

После нажатия на модальное полеКнопка «Назначить», обычно я должен опубликовать введенное значение, а «VisitorID», который, как и «Джон Доу», должен исходить из определенной строки.

Bootstrap modal form

При назначении я должен опубликовать «входное значение» и «VisitorID».

Что у меня есть: 

var table = $('#visitorsTable').DataTable({                
            "ajax": {
                ...
            },
            "columns": [
                { "data": "VisitorID" },
                { "data": "FirstName" },
                { "data": "LastName" },                   
                {
                    "data": "CheckedIn",
                    "render": function(d) {
                        return moment(d).format('DD-MM-YYYY HH:mm');
                    }
                },
                {"data": "CardNumber"},                    
            ],
            columnDefs: [
                {
                    targets: [0], // Visitor ID
                    visible: false
                },                   
                {
                    targets: [-1],
                    render: function(cardNUmber, b, data, d) {
                            return '<button class="btnAssignCard data-toggle="modal" data-target="#assignCardModal" float-right">Assign Card</button>';                           
                    }
                }
            ]
        });

        $('#visitorsTable').on('click',
            '.btnAssignCard',
            event => {
                // THIS IS HOW I GET ACCESS TO THE SPECIFIC ROW
                let rowData = table.row($(event.target).parents('tr')).data();

                var visitorID = rowData.VisitorID;
                var visitorFirstName = rowData.FirstName;
                var visitorLastName = rowData.LastName;

            });
    });

1 Ответ

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

Удалите переключатель данных и цель данных из кнопки.Затем вызовите указанную ниже функцию после 

// THIS IS HOW I GET ACCESS TO THE SPECIFIC ROW
            let rowData = table.row($(event.target).parents('tr')).data();

            var visitorID = rowData.VisitorID;
            var visitorFirstName = rowData.FirstName;
            var visitorLastName = rowData.LastName;
            showMyModalSetInput(visitorFirstName + visitorLastName,visitorID );

Функция откроет модальный режим и передаст необходимые значения перед открытием.Кроме того, для идентификатора посетителя вы можете добавить дополнительный скрытый ввод. 

   function showMyModalSetInput(inputText, visitorID) {

        $('#inputId').val(inputText);
        $('#hiddenInputforVisitorID').val(visitorID);
        $('#assignCardModal').modal('show');
   }
...