I have this table that i have been modifiying and working with for some time now, its for displaying lots of data both condensed and expandle for each row but also searchable and sortable. Here is my problem, my table used to have perfect sorting and searching before i added the expandable and collapsable feature and now i can get my search or sort back. I have narrowed it down to a specific place that seems to mess my whole code up (note that i am using bootstrap and am not entirely familiar with nested tables) here is what i have so far:
Thats all my included files
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- This link is for the formatting on the navigation bar at the top -->
<link rel="stylesheet" href="navbar.css">
<!-- These are the formatting links for the table -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="screen">
<link rel="stylesheet" type="text/css" href="css/DT_bootstrap.css">
<!-- Scripts for the tables auto resizing, search, etc... -->
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" language="javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8" language="javascript" src="js/DT_bootstrap.js"></script>
</head>
This is all my html table code
<div class="col-lg-6">
<div class="row-fluid">
<div class="span12">
<div class="container">
<form method="post" action="##########.php" >
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered table-condensed" id="example">
<br>
<thead>
<tr>
<th></th>
<th>Status</th>
<th>Name</th>
<th>Last 6 VIN#</th>
<th>Account</th>
<th>Repo Sale Date</th>
</tr>
</thead>
<tbody>
<?php
$query=mysqli_query($con, "SELECT * FROM users")or die(mysqli_error($con));
$rownumber = 0;
while($row=mysqli_fetch_array($query)){
$rownumber++;
$id=$row['id'];
?> <!-- This is for declaring each table entry individually so the table will open and close for each row -->
<tr data-toggle="collapse" data-target="#row<?php echo $rownumber;?>" class="accordion-toggle">
<td><center>
<span class="arrow">▼</span>
</center></td>
<td><?php echo @$row['status'] ?></td>
<td><?php echo @$row['username'] ?></td>
<td><?php echo @$row['last_6_vin'] ?></td>
<td><?php echo @$row['account'] ?></td>
<td><?php echo @$row['repo_sale_date'] ?></td>
</tr>
<!-- This is the nested table that the user sees when they click the plus or the table entry -->
<td colspan="12">
<div class="accordian-toggle collapse" id="row<?php echo $rownumber?>">
<table width="100%">
<thead>
<tr>
<td><a href="WorkloadURL">Workload link</a></td>
<td>Bandwidth: Dandwidth Details</td>
<td>OBS Endpoint: end point</td>
</tr>
<tr>
<th>Actions</th>
<th>Secret Key</th>
<th>Status </th>
<th>Created</th>
<th> Expires</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#" class="btn">Select Document To View</a></td>
<td>secretKey-1</td>
<td>Status</td>
<td>some date</td>
<td>some date</td>
<td><a href="#" class="btn">+</a></td>
</tr>
<tr>
<td><a href="#" class="btn">Notice of Sale</a></td>
<td>secretKey-1</td>
<td>Status</td>
<td>some date</td>
<td>some date</td>
<td><a href="#" class="btn">+</a></td>
</tr>
<tr>
<td><a href="#" class="btn">Certified Receipt</a></td>
<td>secretKey-1</td>
<td>Status</td>
<td>some date</td>
<td>some date</td>
<td><a href="#" class="btn">+</a></td>
</tr>
<tr>
<td><a href="#" class="btn">Explanation of Deficiency</a></td>
<td>secretKey-1</td>
<td>Status</td>
<td>some date</td>
<td>some date</td>
<td><a href="#" class="btn">+</a></td>
</tr>
<tr>
<td><a href="#" class="btn">Vehicle Condition Report</a></td>
<td>secretKey-1</td>
<td>Status</td>
<td>some date</td>
<td>some date</td>
<td><a href="#" class="btn">+</a></td>
</tr>
<tr>
<td><a href="#" class="btn">GPS Tracking History</a></td>
<td>secretKey-1</td>
<td>Status</td>
<td>some date</td>
<td>some date</td>
<td><a href="#" class="btn">+</a></td>
</tr>
<tr>
<td><a href="#" class="btn">1099c - Debt Forgiveness</a></td>
<td>secretKey-1</td>
<td>Status</td>
<td>some date</td>
<td>some date</td>
<td><a href="#" class="btn">+</a></td>
</tr>
</tbody>
</table>
</div>
</td>
<?php } ?>
</tbody>
</table>
</div> <!-- This is the ending div for class "container" -->
</div> <!-- This is the ending div for class "span12" -->
</div> <!-- This is the ending div for class "row-fluid" -->
</div> <!-- This is the ending div for class "col-lg-6" -->
Finally this is where my issue is, when i remove the colspan from this part of my code then i get my search sort and pagination features back but the tables layout is all messed up.
</tr>
<!-- This is the nested table that the user sees when they click the plus or the table entry -->
<td colspan="12">
<div class="accordian-toggle collapse" id="row<?php echo $rownumber?>">
<table width="100%">
<thead>
<tr>
There has to be a way to keep the nested table correctly while also keeping the search, sort, and etc functions that i also need.
All help is greatly appreciated, thanks in advance!