0

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.

1.) i need my table to expand and collapse (got that figured out) only issue is that only first entry expands and collapses, need all of them too.

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

3.) 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="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" data-parent="#example" class="accordion-toggle">
                                          <td><center>
                                           <span class="arrow">&#9660;</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" -->
         <!-- This is the ending div for class "panel-body" -->
     <!-- This is the ending div for "panel panel-default" -->
 <!-- This is the ending div for class "col-lg-6" -->

I thank you for any assistence and guidance you give.

1
Contributor
1
Reply
15
Views
2 Years
Discussion Span
Last Post by berserk
0

OK with lots of tinkering and reading i narrowed the issue down to this one place in my html when im calling classes.

<tr>
   <td colspan="12" >
      <div class="accordian-toggle collapse" id="row">
         <table>
            <thead>
               <tr>

When I call that class accordian-toggle if i leave out the initial state "collape" then i can see that each of my entry are in fact getting the data individually its just that i cant seem to set them to open and close dynamically. So i really only need to know where the code is in my Javascript file so i can either edit it or use something else, my problem now is that since im using boostrap the file is HUGE and i have no idea where to even start looking :( such a simple feature but yet so complex to implement correctly.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.