使用数据表单击按钮时在引导模式中显示表单

Question

有一个JQuery数据表（它更复杂，我简化它）如下：

每当我点击“Assign Card”按钮时，我都需要显示带有文本输入字段的bootstrap模态表单。

应该使用来自单击按钮的行的数据填充模态。

单击模式“分配”按钮后，通常我应该发布输入值，“访客ID”就像“John Doe”应该来自特定行。

在分配时我应该发布“输入值”和“访客ID”。

到目前为止我所拥有的：

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;

            });
    });

Answer 1

从按钮中删除数据切换和数据目标。然后调用下面的函数

// 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 );

该函数将打开模态并在打开之前传递所需的值。此外，对于访客ID，您可以添加额外的隐藏输入。

   function showMyModalSetInput(inputText, visitorID) {

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