Question

我有一个使用velocity的Java端点并返回带有表的html页面，我正在使用bootstrap v3.3.7和bootstrap-table v1.12.1，

这个页面主要包含一个表，一些应该展开的行，并在展开的视图中显示另一个表。目前通过hiddenRow和collapse：

完成

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <table class="table table-condensed table-bordered" style="border-collapse:collapse;" data-toggle="table" data-pagination="true" data-search="true" data-show-pagination-switch="true">

    <thead>
      <tr>
        <th>Column1</th>
        <th>Column2</th>
        <th>Column3</th>
      </tr>
    </thead>
    <tbody>
      <tr data-toggle="collapse" data-target="#collapsedRow1" class="accordion-toggle">
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td colspan="12" class="hiddenRow">
          <div class="accordion-body collapse container-fluid" id="collapsedRow1">
            <table class="table table-striped table-bordered">
              <thead>
                <tr>
                  <th>Inner Table Column1</th>
                  <th>Inner Table Column2</th>
                  <th>Inner Table Column3</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                </tr>
              </tbody>
            </table>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

此处类似的解决方案： https://www.bootply.com/fdTMNTiLis

在这里： How do I collapse a table row in Bootstrap?

因此，结果我有一个具有可扩展结构的表，但内部表存在于其他行中，而不是绑定到它们的“父”行。作为按某些列排序时的结果，这些隐藏的行位于表的末尾，当扩展它们的行位于完全不同的位置时，同样的问题是分页，因为当您选择每页10行时它实际显示5行+5个隐藏行，并带有搜索，因为它只显示包含您搜索的模式的行，但不显示由此行展开的行。

还有其他方法可以解决至少其中一些问题吗？或者有一种方法可以将它绑在一对行中？

Bootstrap-table使可扩展行

0 个答案: