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