Question

我使用php（v7.1）从mysql DB生成HTML表，并将其显示在boostrap（v3.3.7）手风琴中；为了“玩”表列，我还使用了Tablesorter（v 2.30）。

只要我使用collapse in类，就可以了，但是如果我希望默认情况下隐藏表并使用collapse类，则当我单击以扩展它时，标签会以正确的大小打开，但不会显示任何内容。如果我单击F12或F11，则会显示表格内容。

HTML内容

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="heading1">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1">
          <span style="color: black; font-size:10px"><strong>List all subscriotion forms <?php echo ( "(" . $TblSize . " volunteers)" ) ?></strong> (click to show/hide)</span>
        </a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1">

        "...My php code to display the table content here... (see below)"

      <div class="panel-body">
      </div>
    </div>-->
  </div>-->
</div>-->

TableSorter内容（实际上是使用PHP部分的echo (\t\t text \n);生成的）

<script>
  $(function() {
    $("#TblVolDet").tablesorter( {
      //defaults,
      theme: 'blue',
      saveSort: 'true',
      showProcessing: 'true',
      headerTemplate : '{content} {icon}',
      widgets: [ 'uitheme', 'zebra', 'scroller' ],
      widgetOptions: {
        filter_liveSearch: true,
        scroller_height: 500,
        scroller_jumpToHeader: true,
        scroller_upAfterSort: false,
        scroller_barWidth: null
      },
      dateFormat: "ddmmyyyy"
    });

    if ( $('.focus-highlight').length ) {
      $('.focus-highlight').find('td, th')
        .attr('tabindex', '1')
        // add touch device support
        .on('touchstart', function() {
        $(this).focus();
      });
    }

  });

</script>

这是mysqli结果（也使用echo (...); cmd）

      <table class="table table-responsive table-hover table-condensed tablesorter focus-highlight hover-highlight" id="TblVolDet" style="font-size:11px;" title="Shift + click to sort on several columns" width="100%"> <!-- Beginning of ''table class=''table table-responsive'''' -->
        <thead>
          <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
            <th>Col4</th>
            <th>Col5</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Text1</td>
            <td style='color: green; font-weight: bold;'>Text2</td>
            <td style='color: green; font-weight: bold;'>Text3</td>
            <td style='color: black; font-weight: normal;'>Text4</td>
            <td style='color: green; font-weight: bold;'>Text5</td>
          </tr>
        </tbody>
      </table>

折叠式手风琴中的MYSQL表未显示

0 个答案: