Question

我正在使用jQuery Datatables在我的表中显示数据，但想要在每一行都有更多信息的popover。

我在哪里

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

问题我只想要一次显示一个popover，发生了什么，我有一个代码，其中onClick的行，我得到popover，当用户点击另一行时，我得到另一个popover对该行。因为我希望用户浏览所有popover数据和用户也点击popover上的链接，我不能保持popover 'trigger' : 'hover'这不允许用户读取/点击popover上的所有数据，但如果我使用手册，它在该页面上的另一个弹出窗口上打开时不会自动关闭。

我尝试了类似$('#tableid tbody tr').popover('hide');之类的东西（认为这会隐藏与tr相关的每个弹出窗口），然后打开一个弹出窗口，但这不起作用，或者更确切地说停止弹出窗口打开atall。

我试图用来展示弹出窗口

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

        //$('#tableid tbody tr').popover('hide');
        $(this).popover({
            //'trigger' : 'manual',
            'container': 'body',
            'placement': 'right',
            'title': 'Another Test',
            'content': 'Test'
        }).popover('show');           
    }
});

任何人都可以指导我正确的方向来解决这个问题。

任何帮助将不胜感激。

由于

Answer 1

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

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

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

Demo

Answer 2

尝试使用：

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

    trigger:"click"

});

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

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

});

Answer 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() {
    });
});

希望这对您有帮助。.让我知道这是否对您有帮助

在行级别使用Jquery Datatable的jQuery popover

3 个答案:

Demo