Question

具有一个JQuery数据表（我简化了它，比较复杂），如下所示：

每当我单击“分配卡”按钮时，都需要显示带有文本输入字段的引导程序模式表单。

应该在模式中填充来自单击按钮的行的数据。

在单击模式“分配”按钮时，通常我应该张贴输入的值，并且像“ John Doe”这样的“ VisitorID”应该来自特定行。

在分配时，我应该发布“输入值”和“ 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;

            });
    });

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');
   }

使用数据表在单击按钮时以自举模式显示表单

1 个答案: