OKAY i have been working on this for a little while and i feel i am getting close but there are a few things i can't seem to find on the internet that are good examples/tutorials/reading materials.
- i need my table to expand and collapse (got that figured out)
- i need my table to expand and collapse for each individual entry, currently my table will only expand or collapse based on the first entry of the table no matter which entry you click on.
There are going to be thousands of entries in this table so i need a way to automate the process of displaying data per entry without writing code for each individual entry, this is my main problem i'm facing. - for some reason when set up a nested table inside my current table the search, page number, and page entry list with the navigation arrows disappears. Not sure if this has anything to do with incorrectly calling the classes based on my nested tables or what but i need that fixed.
- currently i have the expand and collapse function set up as the entire table entry is clickable and it will expand and collapse but id like to have it where only the button in the first column will do this, i don't really mind this either way so its not a big deal.
This is the html code that i have so far (the css/javascript are based on bootstrap)
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-body">
<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));
while($row=mysqli_fetch_array($query)){
$id=$row['id'];
?>
<!-- This table is the first table displayed and shown to the user -->
<tr data-toggle="collapse" data-target="#row" 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 -->
<tr>
<td colspan="12">
<div class="accordian-body collapse" id="row">
<table>
<thead>
<tr>
<td><a href="WorkloadURL">Workload link</a></td>
<td>Bandwidth: Dandwidth Details</td>
<td>OBS Endpoint: end point</td>
</tr>
<tr>
<th>Access Key</th>
<th>Secret Key</th>
<th>Status </th>
<th>Created</th>
<th> Expires</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>access-key-1</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>
</tr>
<?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 "panel-body" -->
</div> <!-- This is the ending div for "panel panel-default" -->
</div> <!-- This is the ending div for class "col-lg-6" -->
</form>
Thank you for any and all assistence!!