在行级别使用 Jquery Datatable 的 jQuery 弹出框答案

【问题标题】：jQuery popover with Jquery Datatable at row level在行级别使用 Jquery Datatable 的 jQuery 弹出框
【发布时间】：2013-05-13 16:19:21
【问题描述】：

我正在使用 jQuery Datatables 来显示我的表格中的数据，但想要一个弹出框，其中包含关于每一行的更多信息。

我在哪里

我已经能够使用 jQuery 数据表在我的表中获取数据，并且可以在每一行获得弹出框。

问题我只希望一次显示一个弹出窗口，发生的事情是，我有一个代码，其中 onClick 行，我得到弹出窗口，当用户单击另一行时，我得到另一个弹出窗口反对该行。由于我希望用户浏览所有弹出框数据并且用户还单击弹出框上的链接，因此我无法保留弹出框'trigger' : 'hover' 并且这不允许用户阅读/单击弹出框上的所有数据但是如果我使用手册，它在该页面上的另一个弹出窗口上打开时不会自动关闭。

我在打开弹出框之前尝试过类似$('#tableid tbody tr').popover('hide');（认为这将隐藏与 tr 关联的每个弹出框）之类的方法，但这不起作用，或者更确切地说是阻止弹出框完全打开。

我正在尝试使用 js 来显示弹出框

$('#tableid tbody tr').live('click', function () { if (this.id.length > 0) {

 //$('#tableid tbody tr').popover('hide');
        $(this).popover({
            //'触发器'：'手动'，
            “容器”：“身体”，
            “放置”：“正确”，
            'title': '另一个测试',
            '内容'：'测试'
        }).popover('show');
    }
});

谁能指导我正确的方向来解决这个问题。

任何帮助将不胜感激。

谢谢

【问题讨论】：

你能把 html 和你目前写的任何 js 贴出来吗？
@Jay 你能做个小提琴和/或编辑你的帖子吗？
很好！ :) popover 是由某种插件生成的吗？
@SachinG : popover 由引导插件创建

标签： jquery twitter-bootstrap popover

【解决方案1】：

您可以使用这样的代码来隐藏任何其他打开的弹出框..

$('[data-toggle=popover]').on('click', function (e) {
   $('[data-toggle=popover]').not(this).popover('hide');
});

[data-toggle=popover] 选择器可以进行相应修改，但您要为每个 TR 创建弹出框。

Demo

【讨论】：

我遇到的问题是我的表格行是动态创建的，我需要使用 .live 参数将点击事件附加到每一行。当我使用您的 .not(this) 代码时，我只能获得第一个弹出框（无论我单击哪一行），之后任何行都不会打开弹出框。
您不需要使用 .live -- .on 是首选方法。
感谢@Skelly，我已经更改了我的代码，因此我只在悬停时显示弹出窗口，并且在行级别添加了单击事件。感谢您创建该演示，将用于某人。

【解决方案2】：

尝试使用：

 $('[data-toggle=popover]').popover({

    trigger:"click"

});

$('[data-toggle=popover]').on('click', function (e) {

    $('[data-toggle=popover]').not(this).popover('hide');

});

【讨论】：

【解决方案3】：

每当我需要在每个单元格中切换弹出框时，您都可以使用此方法，因为我一直在尝试此方法

$('#viewtable tbody').on('click', 'tr',  function () {
    $("#viewtable tbody tr").removeClass('row_selected');       
    $(this).addClass('row_selected');
    var tr = $(this).closest('tr');
    var selectedData = jDataTable.row(tr).data();
    console.log(selectedData);

    var dataaa = JSON.stringify(selectedData);
    var cont = '<div class="text-center" id="viewdiv"><button class="btn btn-warning" ng-click="viewticketdetails('+selectedData.ticketid+')"\>View Ticket</button><button class="btn btn-info" ng-click="updateticket()">Update Ticket</button></div>';                   

    $(this).popover({
        html: true,
        sanitize: false,
        trigger: 'click',
        placement: 'auto top',
        content : function(){
            return compile(cont)(scope);
        }
    }).popover('toggle');

    $('#viewtable tbody tr').off('click').on('click', function() {
    });
});

希望这会对你有所帮助..如果这对你有帮助，请告诉我

【讨论】：