AdminLTE BootStrap - Table 搜索栏随着附加的 <th> 标签消失

Question

使用 AdminLTE 并遇到 tables 问题。

AdminLTE 具有开箱即用的搜索功能和内置于其 table 格式中的组织功能。使用 PHP 弹出一些 table 数据，一切正常。但是当我尝试扩展示例页面中内置的 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

这是一个小问题

搜索和格式设置消失了，因为我没有向 table 页眉和 table 页脚添加项目，也没有在我的 PHP 回显命令中包含该列。

在所有三个区域中加入新列解决了这个问题。

AdminLTE BootStrap - Table 搜索栏随着附加的 <th> 标签消失

AdminLTE BootStrap - Table Search Bar disappearing with additional <th> tags

javascript

php

jquery

adminlte

bootstrap-4