bootstrap table nested table

The pagination doesn't work if the table has sub tables

by Intesar Haider

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>

<table data-toggle="table" id="table" class="" data-detail-view="" data-pagination="true" data-pagination-pre-text="< Previous" data-pagination-next-text="Next >" data-classes="table table-hover table-condensed">
  <thead>
    <tr>
      <th width="1%"></th>
      <th data-field="" width="14%">col1</th>
      <th data-field="" width="20%">col2</th>
      <th data-field="" width="16%">col3</th>
      <th data-field="" width="13%">col4</th>
      <th data-field="" width="12%">col5</th>
      <th data-field="" width="11%">col6</th>
      <th data-field="" width="13%">col7</th>
    </tr>
  </thead>
  <tbody>
    <tr class="clickable js-tabularinfo-toggle" data-toggle="collapse" id="row1" data-target=".row1">
      <td><i class="tabularinfo__icon fa fa-plus"></i></td>
      <td></td>
      <td colspan="6">Lorem Ipsum</td>
    </tr>
    <tr class="tabularinfo__subblock collapse row1">
      <td colspan="8">
        <table id="" class="tabularinfo tabularinfo--child" data-detail-view="">
          <thead>
            <tr class="clickable js-tabularinfo-toggle" data-toggle="collapse" id="" data-target=".subrow1">
              <th width="1%" class="tabularinfo__cell--icon"><i class="tabularinfo__icon fa fa-plus"></i></th>
              <th width="14%" data-field="">03 Nov 2015</th>
              <th width="20%" data-field="">Lorem Ipsum</th>
              <th data-field="" colspan="4">Lorem Ipsum</th>
              <th width="13%"...

CSS

table {border: 1px solid #000}
table td { border: 1px solid #000; padding:5px;}

JavaScript

$(document).ready(function(){
   $('.js-tabularinfo').bootstrapTable({
        escape: true,
        showHeader: true
      });
});