Question

使用AdminLTE并遇到表格问题。

开箱即用，AdminLTE具有内置于表格格式中的搜索功能和组织功能。使用PHP弹出一些表数据，一切都很好。但是，当我尝试扩展到示例页面中内置的5个现有<th>标记之外时，搜索框和能力组织完全消失，我不知道为什么。

以下示例。任何帮助或方向表示赞赏。谢谢！

这有效：

<section class="content">
      <div class="row">
        <div class="col-xs-12">
          <div class="box">
            <div class="box-header">
              <h3 class="box-title">Data Table With Full Features</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <table id="example1" class="table table-bordered table-striped">
                <thead>
                <tr>
                  <th>Label 1</th>
                  <th>Label 2</th>
                  <th>Label 3</th>
                  <th>Label 4</th>
                  <th>Label 5</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                </tr>
                  <?php
                    if ($result->num_rows > 0) {
                        // output data of each row
                        while($row = $result->fetch_assoc()) {
                            echo "<tr>";
                            echo "<td>".$row["ini"]."</td><td>".$row["INI Name"]."</td><td>".
                              $row["Email Owner"]."</td><td>".$row["Analyst Build"]."</td><td>".
                              $row["Data Courier"]."</td><td>".
                              $row["Change Control"]."</td><td>".$row["Direct build in PRD"]."</td>";
                          echo "</tr>";
                        }
                    } else {
                        echo "0 results";
                    }
                    $conn->close();
                    ?>

                </tbody>
                <tfoot>
                <tr>
                  <th>Label 1</th>
                  <th>Label 2</th>
                  <th>Label 3</th>
                  <th>Label 4</th>
                  <th>Label 5</th>
                </tr>
                </tfoot>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

然而，这会打破搜索栏：

  ...
      <th>Label 1</th>
      <th>Label 2</th>
      <th>Label 3</th>
      <th>Label 4</th>
      <th>Label 5</th>
      <th>Label 6</th>
 ...

至于JS

  $(function () {
    $('#example1').DataTable()
    $('#example2').DataTable({
      'paging'      : true,
      'lengthChange': false,
      'searching'   : false,
      'ordering'    : true,
      'info'        : true,
      'autoWidth'   : false
    })
  })

还引用了以下bower_components/datatables.net/js/jquery.dataTables.min.js

Answer 1

这最终成为一个小问题

搜索和格式化消失了，因为我没有在表头，表格页脚中添加项目，并在我的PHP echo命令中包含该列。

在所有三个区域中包含新列都解决了这个问题。

AdminLTE BootStrap - 表搜索栏随附加标签消失

1 个答案: