Bootstrap table 中的弹出窗口，过滤器控件不起作用（过滤后）

Question

我已经设置了 bootstrap table 和过滤器控件扩展。我要过滤的 table 提供了许多弹出窗口和工具提示。但是，它们在过滤后停止工作。我该怎么做才能重新激活它们？

我的代码示例可以在这里看到（位置类型 "Other" 应该有一个弹出窗口，这只在第一次过滤之前有效）：

<table ref="mainTable" class="table table-striped table-bordered table-hover" 
       cellSpacing="0" id="mainTable" data-show-toggle="true" 
       data-show-columns="true" data-search="true" data-pagination="true" data-filter-control="true">
    <thead>
        <tr>
            <th data-field="state" data-checkbox="true"></th>
            <th data-field="CustomerName" data-sortable="true" data-filter-control="select">Customer Name</th>
            <th data-field="LocationType" data-sortable="true">Location Type</th>
            <th data-field="Location" data-sortable="true" data-filter-control="select">Location</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>Cap Corp</td>
            <td>Main</td>
            <td>Norwalk CT 06851</td>
        </tr>
        <tr>
            <td></td>
            <td>Cap Corp</td>
            <td><a class="ajaxPopover">Other</a></td>
            <td>Norwalk CT 06851</td>
        </tr>
        <tr>
            <td></td>
            <td>Tel</td>
            <td>Main</td>
            <td>Slough SL1 4DX</td>
        </tr>
        <tr>
            <td></td>
            <td>Tel</td>
            <td><a class="ajaxPopover">Other</a></td>
            <td>London W1B 5HQ</td>
        </tr>
    </tbody>
</table>

...使用以下 javascript 代码：

$('#mainTable').bootstrapTable({
});

// Add some popovers
$('.ajaxPopover').popover({
    html: true,
    placement: "auto right",
    container: 'body',
    content: "<b>Text</b> Other Text"
});

http://jsfiddle.net/7bpLrafx/4/

感谢您的帮助！

Answer 1

在 table 中进行更改（如排序、显示更改等）时，您必须重新初始化弹出窗口。

JS:

$('#mainTable').on('all.bs.table', function () {
  $('.ajaxPopover').popover({
    html: true,
    placement: "auto right",
    container: 'body',
    content: "<b>Text</b> Other Text"
  });
});

Answer 2

您可以使用 Bootstrap 的内置功能在 DOM 中进行 table 过滤后重新初始化弹出窗口：

$('#mainTable').on('post-body.bs.table', function () {
    $('.ajaxPopover').popover();
});

Bootstrap table 中的弹出窗口，过滤器控件不起作用（过滤后）

Popover in Bootstrap table with filter control not working (after fltering)

twitter-bootstrap-3

bootstrap-popover

bootstrap-table