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)
  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.
  4. 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">&#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" -->
       </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!!

Edited by diafol: moved to js

2
Contributors
13
Replies
48
Views
2 Years
Discussion Span
Last Post by diafol
Featured Replies
  • 1
    diafol 3,720   2 Years Ago

    Not sure if I'm on the right track here. You have a panel which can be expanded/collapsed to show a table. The rows in the table be expanded or collapsed in turn is that right? Can't see why the functionality needs PHP. The raw HTML from PHP, yes fine, but … Read More

0

Are you certain this is a PHP issue?

0

I was thinking of maybe being able to write the logic i need in php but if im on the wrong track then i would not be suprised. if this can be done with javascript or simple html then im all ears.

Edited by berserk

1

Not sure if I'm on the right track here. You have a panel which can be expanded/collapsed to show a table. The rows in the table be expanded or collapsed in turn is that right?

Can't see why the functionality needs PHP. The raw HTML from PHP, yes fine, but the interactivity will be due to HTML/JS/CSS. Remember that PHP is done and dusted by the time you see it in the browser - it can't react to user actions in the page, not unless you involve Ajax.

//EDIT

As far as your row collapse/expand goes - if you really have loads and loads of data, you may find it easier to Ajaxify the call for the data to be shown on expand. So, If you show say 50 table rows, you wouldn't want an inner table for each one of those on page load, would you?

You could set up the "expand" structure required on each table row if you really wanted, or you could dynamically add these on the fly (if they don't exist already), e.g. with .append() or .after()

However, if you add items to the DOM after page load you may find that these recently added items will not react to their pre-written handlers. In which case, make sure you use the .on() method of handling events.

Edited by diafol

0

PHEW thats a lot of information to sort through. So i need to use ajax almost entirely for this even to handle correctly. I understand i just hope this will be an easy thing to figure out.

Thank you for you time and assistence.

0

Okay so i have definitly made some progress. I found that this line in my code is most likely where the problem needs to be fixed.

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

Is there any way i can modify this to where each individual row in the table is expandable and collapsable, so far like before its just the first entry but I KNOW from tinkering that each entry is getting information individually so thats perfect, all i need is for the row to each be expandable, although i see some issues like how my table is being generated with a while loop in php/html, so it makes sense that the first entry is working like it should because the html is only set for the first entry, all entries after are not set properly.

Would i be able to modify that id="row" to where its different for each iteration of the html in the while loop? like similar to what i have for the php table.

if im completely off the right track let me know cause im just brainstorming here lol

0

I'm assuming that the expandable/collapsible control should be on the parent row tag (tr) rather than the table data cell (td). You're using bootstrap (?) from your markup, and the accordion example on the site uses panels. I've always found bootstrap to be very flexible in applying its methods to different containers though, so <tr> should work IMO, but there again I haven't tried it.

0

I moved the class calls to the <tr> like you said and unfortunatly nothing worked after that :( i am not having any luck with this at all and really my only issue is that it will only work on that first row entry on my table, the rest of the rows if clicked with just open the first collpased row, is there some way to set these apart because i feel like my issue now is very small and simple but im just not seeing it.

0

OH and just as a reference if these would help me get any more information regarding this subject ill include everything i can.

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

YES! with enough time and concentration the answer can be found, and i would be delighted to share this solution to help any wondering php'ers that happen across this by any chance.

FIRSTLY turns out this CAN be done in php, or at least the logic, you are still going to use javascript like bootstrap and jquery to call classes so it will know what to do with said php logic. Here is what i have.

<tr data-toggle="collapse" data-target="#row<?php echo $loopcounter; ?>" 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>

Notice what i did here, i still declared the id as row for the data-target to work properly with jquery BUT i added that php loopcounter in there, the loop counter is used in the while loop when creating the php table, like below.

<?php 
$query=mysqli_query($con, "SELECT * FROM users")or die(mysqli_error($con));
$loopcounter = 0;
while($row=mysqli_fetch_array($query)){
$loopcounter++;
$id=$row['id'];
?>

simply initialize the loopcounter and then in teh while loop add one each time and this will become your individualized row ID for making each table entry open and close. I am NOW in the process of figuring out how to get them to open and close singularly so as to not open so many at the same time but that one is for a later date. I hope this helps anyone who struggles with this as i have and regardless i always enjoy using this website because the community are so supportive, and also thank you diafol for the help :D

Votes + Comments
Thanks for sharing
0

Ah OK, I see what you're trying to do now. Good job.

With regard to opening singularly, I believe you need to stipulate a container, which would probably be the <tbody> in your case. The TB site uses "panel panel-group" for accordion: http://getbootstrap.com/javascript/#collapse

Whether you could trick TB by applying that to <tbody> as classnames I don't know.

This question has already been answered. 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.