jquery datatable - 将 jquery UI modal 定位在所选记录下方答案

【问题标题】：jquery datatable - position jquery UI modal below the selected recordjquery datatable - 将 jquery UI modal 定位在所选记录下方
【发布时间】：2017-10-23 22:37:13
【问题描述】：

我遵循下面给出的示例，每当用户单击 jquery 数据表中的行时，我都能显示 jqueryui 模式。

https://datatables.net/extensions/responsive/examples/display-types/jqueryui-modal.html

无论如何，我可以将模态对话框定位在所选行的下方吗？

期望：

我的代码：

我正在尝试设置如下所示的位置。但是，它没有按预期工作。我应该如何将所选数据表记录的位置传递/分配给 jquery UI 模式对话框？

 responsive: {
            details: {
                display: $.fn.dataTable.Responsive.display.modal({
                    header: function () {
                        return 'View Record';
                    },
                    dialog: {                        
                        modal: true,
                        width: 800,
                        resizable: false,
                        position: { my: "left top", at: "left bottom", of: $(tableId) },
                        create: function (event, ui) {

                        },
                        open: function (event, ui) {

                        }
                    }
                }),

感谢任何建议/建议。

【问题讨论】：

什么是$(tableId)？
tableId -> 是 jquery 数据表的 id。 $(tableId) -> 是它的 jquery 对象。
你不需要$("#" + tableId)
tableId 变量的值已经是'#'。感谢您的检查。
基于文档，...一个 modal 选项，它是一个配置参数对象，将被传递给 jQuery UI 模式。 然后应该是 dialog对象被称为modal?

标签： javascript jquery jquery-ui datatable

【解决方案1】：

文档中有点不清楚，但似乎 row 已传递给标头函数。我认为您希望在对话框的位置设置中将其作为目标。看起来您无法访问事件对象，也许您可以将row 传递给一个变量，然后该变量可以传递给modal 对象。

$(document).ready(function() {
    var myRow;
    $('#example').DataTable( {
        responsive: {
            details: {
                display: $.fn.dataTable.Responsive.display.modal( {
                    header: function ( row ) {
                        myRow = row;
                        console.log("My Row:", myRow);
                        return 'View Record';
                    },
                    modal: {
                        modal: true,
                        width: 800,
                        resizable: false,
                        position: {
                            my: "left top",
                            at: "left bottom",
                            of: $(myRow)
                        }
                    }
                } )
            }
        }
    } );
} );

相关表的 DataTables API 实例，该实例预填充了正在执行的行 - 即来自 row() 的结果。

一旦您看到传递给myRow 的对象或参数，您可能需要调整您的位置参数。

【讨论】：