Search code examples
javascriptphpjquerybootstrap-4adminlte

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


Using AdminLTE and having issues with the tables.

Out of the box, AdminLTE has a search function and organizing function built into its table formatting. Popping in some table data using PHP, everything comes across OK. But when I try to expand beyond the 5 existing <th> tags built into the sample page, the search box and ability organize completely vanishes and I've got no idea why.

Sample below. Any help or direction is appreciated. Thanks!

This works:

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

However this breaks the search bar:

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

As for the JS

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

Also references the following bower_components/datatables.net/js/jquery.dataTables.min.js


Solution

  • This ended up being a minor issue

    The search and formatting vanished because I did not add an item to both the table header, table footer, and include the column in my PHP echo commands.

    Including the new columns in all three areas fixed the issue.