Таблица MYSQL в свернутом аккордеоне не отображается - PullRequest
Новая
       26

Таблица MYSQL в свернутом аккордеоне не отображается

0 голосов
/ 24 декабря 2018

Я генерирую таблицу HTML из БД mysql, используя php (v7.1), и отображаю ее в аккордеоне 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 (фактически сгенерированное с использованием echo (\t\t text \n); в разделе PHP) 

<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>
...