Bootstrap数据表未显示在其他选项卡上

Question

这是我用laravel5编写的代码，基本上我试图根据所选下拉列表中的选项单独显示各种表，数据表适用于第一个表结果但是对其余表不起作用，正确我，如果我错了，但显然它与第一次通话中的数据有关;如果第二个数据表使用相同的函数，它将看到数据已被提取，并且不进行ajax调用以检索其数据。所以你不会收到第二个（第n个）数据表的数据。一直试图解决这两天，我相信我错过了什么，有人请帮助我提供解决方案。提前谢谢。

@extends('app')
@section('content')

<h1 class="page-header">Reports Archive</h1>     
<div class="dropdown">
  <a id="drop5" href="#" class="btn btn-default  dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
    Zone Options: 
    <span class="caret"></span>
  </a>
  <ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
    <?php $count = 1; ?>
    @foreach ($zones as $zone)
    <li role="presentation" class="{{ $count == 0 ?  'active' : '' }}">
      <a role="menuitem" tabindex="-1" href="#" data-target="#zone{{ $zone->id }}"> {{ $zone->zone_name }}</a></li>
      <?php $count++; ?>
      @endforeach
    </ul>
  </div>

  <div role="tabpanel">
    <!-- hide the below links-->
    <ul class="nav nav-tabs" style="display:none;" role="tablist" id="myTab">
      <?php $count = 1; ?>
      @foreach ($zones as $zone)
      <li role="presentation" class="{{ $count == 0 ?  'active' : '' }}"><a href="#zone{{ $zone->id }}" aria-controls="zone{{ $zone->id }}" role="tab" data-toggle="tab">{{ $zone->zone_name }}</a></li>
      <?php $count++; ?>
      @endforeach
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
      <?php $count = 1; ?>
      @foreach ($zones as $zone)
      <div role="tabpanel" class="tab-pane fade in {{ $count == 0 ?  'active' : '' }}" id="zone{{ $zone->id }}">
        <div class="col-md-12">
          <h2> {{ $zone->zone_name }}  </h2>
          <table class="table table-responsive table-hover table-bordered" id="bootstrap-table">
            <thead>
              <tr>
                <th style="vertical-align:middle">#</th>
                <th>
                  <div class="dropdown">
                    <a id="drop5" href="#" class="btn btn-default  dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
                      Parameter Name: 
                      <span class="caret"></span>
                    </a>
                    <ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
                      @foreach ($zone->parameter as $param)
                      <li role="presentation">
                        <a class="btn btn-link" data-collapse-group="filters" data-target="#{{ $param->id }}" data-toggle="collapse">{{ $param->parameter_name }}</a></li>
                        @endforeach
                      </ul>
                    </div>
                  </th>
                  <th style="vertical-align:middle">Reading Value</th>
                  <th style="vertical-align:middle">User</th>
                  <th style="vertical-align:middle">Status</th>
                  <th style="vertical-align:middle">Timestamp</th>
                </tr>
              </thead>

             @forelse ($parameters as $param)
              <?php $index = 1; ?>
              @if ($param->zone_id == $zone->id)
              <tbody id="{{ $param->id }}" class="collapse">
                @foreach ($readings as $reading)
                @if ($param->id == $reading->parameter_id)
                <tr>
                  <td>{{ $index }}</td>
                  <td>{{ $reading->parameter->parameter_name }} </td>
                  <td>{{ $reading->reading_value }} </td>
                  <td>{{ $reading->user->name }} </td>
                  <td>{{ $reading->parameter->threshold->getStatus($reading->reading_value) }} </td>
                  <td>{{ $reading->created_at }} </td>
                </tr>
                <?php $index++; ?>
                @endif
                @endforeach
                @endif         
                @empty  
                <tr><td  colspan="6"><div class="alert alert-warning" role="alert" style = "margin-top: 10px"> Oops! There are no parameters to display here </div></td></tr>
              </tbody>
            </div>
              @endforelse
            </div>
          </table>
        </div>
      </div>
      <?php $count++; ?>
      @endforeach
    </div>
  </div>
  @stop

@section('scripts')
<!-- Bootstrap Based Data Table Plugin Script-->
<script src="http://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="js/jquery.bdt.js" type="text/javascript"></script>

<script>
$(document).ready( function () {
  $('#bootstrap-table').bdt();
});
</script>

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script> 

<script>
$('.dropdown-toggle').dropdown();

</script>
@stop