无法通过分页和排序获取数据表中面板的 ID

Question

我有一个数据表，其中有 expandable/collapsible bootstrap 个面板作为行。

这是最初的样子：

这是在展开其中一个面板之后：

注意：数据表有分页和排序。

面板的html（行）：

<tr>
<td>
                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            @process
                                            <a href="javascript:void(0);" data-perform="panel-collapse" data-toggle="tooltip" title="" class="pull-right">
                                                <em class="fa fa-plus"></em>
                                            </a>
                                        </div>
                                        <div class="panel-wrapper collapse" aria-expanded="false" style="height: 0px;" id="pnl_@process" title="pnl_@process">
                                         //the table in the expanded panel here   

                                        </div>
                                    </div>
                                </td>
                            </tr>

注意：上面的html代码在一个foreach循环中，一行一行地填充数据（mvc视图）。

我写了一个jquery代码来获取扩展面板的id:

$('.panel-wrapper').on('show.bs.collapse', function () {
            var pnlId = $(this).attr('id');       
            alert(pnlId.id + ' expanded');

            }
        });

但是我只得到数据表第一页的正确 ID。从第二页开始，id 为 undefined。我做错了什么？

编辑：

现在我可以获取 ID（感谢 GuruPrasad Rao），但我还使用该 ID 使面板在重新加载时展开。像这样的事情：

$(document).ready(function () {

 $('#' + pnlId).collapse("show");

});

但是，这不适用于不在第一页中的面板。我可以做些什么来实现这一目标？

Answer 1

我怀疑一旦你导航到 page 之后的页面的 $('.panel-wrapper') 就会被构建并附加到 DOM，因此它形成了动态内容，你需要使用 event delegation 操作动态内容如下：

$(document).on('show.bs.collapse','.panel-wrapper', function () {
       var pnlId = $(this).attr('id');       
       alert(pnlId.id + ' expanded');
});

$(document) 可以替换为任何静态内容，例如 table id，它将出现在 page load

更新

对于您的其他问题，您需要在每次页面更改时使用 bootstrap table 的 onPageChange 方法 - docs

例如

$('#yourtableid').bootstrapTable({
}).on('page-change.bs.table', function (e, size, number) {
         //collapse the panel here
})

Doc Example

无法通过分页和排序获取数据表中面板的 ID

Unable to get the id of the panel in a datatable with paging and sorting

jquery

panel

twitter-bootstrap