Title: Expandable rows?
Last modified: August 31, 2016

---

# Expandable rows?

 *  [Myg0t](https://wordpress.org/support/users/myg0t/)
 * (@myg0t)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/expandable-rows/)
 * Hey there, great looking plugin! I have just a couple questions for you…
 * 1. I need to be able to expand each row to show more detailed information about
   the expanded row. Is this plugin capable of doing this? If not, do you know how
   I would be able to add this functionality because I know that it is possible 
   with the Jquery DataTables API which I assume is where this plugin is developed
   from…
 * 2. My table is being generated dynamically using PHP via a shortcode/function
   pair that I am developing. How would you suggest that I use your plugin in conjunction
   with this?
 * here is my code:
 *     ```
       add_shortcode('user_database_mm','user_database_generate');
           function user_database_generate(){
               global $wpdb;
               $user_ID = get_current_user_id();
               $form_db_name = "form_contact_information";
               $results = $wpdb->get_results("Select * FROM $form_db_name");
               echo '<table style="width:100%" id="user_data_table">
                       <tr>
                           <th></th>
                           <th>User ID</th>
                           <th>First Name</th>
                           <th>Last Name</th>
                           <th>Contact Form</th>
                           <th>Edit</th>
                       </tr>';
               foreach ($results as $user_data){
                   echo '<tr>
                           <td>'.get_avatar($user_data->user_ID,30).'</td>
                           <td>'.$user_data->user_ID.'</td>
                           <td>'.$user_data->first_name.'</td>
                           <td>'.$user_data->last_name.'</td>
                           <td>YES</td>
                           <td><form method="post" action="'.$this_page.'"></td>
                         </tr>';
               }
               echo '</table>';
               echo do_shortcode('[wp_jdt id="user_data_table"]');
           }
       ```
   
 * many thanks!
 * [https://wordpress.org/plugins/wp-jquery-datatable/](https://wordpress.org/plugins/wp-jquery-datatable/)

Viewing 5 replies - 1 through 5 (of 5 total)

 *  Thread Starter [Myg0t](https://wordpress.org/support/users/myg0t/)
 * (@myg0t)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/expandable-rows/#post-7156568)
 * Update: I’ve implemented the use of the expandable/collapsable rows using some
   jquery, but I still cannot get the shortcode to work… Its coming up with a `Uncaught
   TypeError: Cannot read property 'mData' of undefined`
    Do you know what would
   be causing this?
 * Here is my code thus far
 * jQuery:
 *     ```
       jQuery(document).ready(function($){
           $("tr.parent")
               .attr("title","Click to expand/collapse")
               .click(function(){
                   $(this).siblings('.child-'+this.id).slideToggle("fast");
           });
       });
       ```
   
 * PHP Table Generation:
 *     ```
       add_shortcode('user_database_mm','user_database_generate');
           function user_database_generate(){
               global $wpdb;
               $user_ID = get_current_user_id();
               $form_db_name = "form_contact_information";
               $results = $wpdb->get_results("Select * FROM $form_db_name");
               $first = TRUE;
               echo '<div id="user_data_table_div">';
               echo do_shortcode('[wp_jdt id="user_data_table"]');
               foreach ($results as $user_data){
                   if($first){
                     echo '<table id="user_data_table" style="width:100%">
                           <tr>
                               <th>User ID</th>
                               <th>First Name</th>
                               <th>Last Name</th>
                               <th>Contact Form</th>
                           </tr>';
                      $first = FALSE;
                   }
                   echo '<tr class="parent" id="'.$user_data->user_ID.'" title="Click to expand/collapse" >
                           <td>'.$user_data->user_ID.'</td>
                           <td>'.$user_data->first_name.'</td>
                           <td>'.$user_data->last_name.'</td>
                           <td>YES</td>
                         </tr>
                         <tr class="child-'.$user_data->user_ID.'" style="display: none">
                           <td colspan="4">
                               <h3>Contact Information</h3>
       <pre>
       <b>Email:</b> '.$user_data->email.'  <b>Phone: </b>'.$user_data->phone.'
       <b>Address 1:</b> '.$user_data->address1.'
       <b>Address 2:</b> '.$user_data->address2.'
       <b>Country:</b> '.$user_data->country.'
       <b>State/Province:</b> '.$user_data->state.'
       <b>City:</b> '.$user_data->city.'
       <b>Zip Code:</b> '.$user_data->zip_code.'
       </pre>
                           </td>';
               }
               echo '</table></div>';
           }
       ```
   
 * Much appreciated!
 *  Thread Starter [Myg0t](https://wordpress.org/support/users/myg0t/)
 * (@myg0t)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/expandable-rows/#post-7156572)
 * Just kidding… I fixed that error…. Turned out it was because I didn’t have <thead
   > and <tbody> tags in my table.
 * Now I am getting a new error….
 * `Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined`
 * If you want I can repost the code, but the only different is <thead> </thead>
   wrapped around the <tr>’s of the <th>’s and the <tbody> </tbody> wrapped around
   the rest…
 * Thanks!
 * You can view the page in question here: [http://dev2.myg0tm3dia.com/user-database](http://dev2.myg0tm3dia.com/user-database)
 *  Thread Starter [Myg0t](https://wordpress.org/support/users/myg0t/)
 * (@myg0t)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/expandable-rows/#post-7156573)
 * I fixed it. lol. I should really wait a little bit before I ask these questions
   I suppose…
 * For those of you who might have similar problems it turns out that the _DT_CellIndex
   error was happening because I didn’t have the same number of <td>’s in my child
   <tr> as I did <th>’s. So it was freaking out.
 * I solved it by adding some empty <td>’s in the child <tr>. Like so:
 *     ```
       <tr class="child-'.$user_data->user_ID.'" style="display: none">
                           <td colspan="4">
                               <h3>Contact Information</h3>
       <pre>
       <b>Email:</b> '.$user_data->email.'  <b>Phone: </b>'.$user_data->phone.'
       <b>Address 1:</b> '.$user_data->address1.'
       <b>Address 2:</b> '.$user_data->address2.'
       <b>Country:</b> '.$user_data->country.'
       <b>State/Province:</b> '.$user_data->state.'
       <b>City:</b> '.$user_data->city.'
       <b>Zip Code:</b> '.$user_data->zip_code.'
       </pre>
                           </td>
                           <td style="display: none"></td>
                           <td style="display: none"></td>
                           <td style="display: none"></td>';
       ```
   
 * Hope this helps someone.
 *  [blogdropper](https://wordpress.org/support/users/blogdropper/)
 * (@blogdropper)
 * [10 years, 2 months ago](https://wordpress.org/support/topic/expandable-rows/#post-7156631)
 * Hi, I’m interested in being able to select the columns I wish to display and 
   hiding those I don’t. I understand this is what your code does. Would it be possible
   to see a working example with this functionality.
 * Thanks
    David
 *  Plugin Author [AppJetty](https://wordpress.org/support/users/biztechc/)
 * (@biztechc)
 * [10 years ago](https://wordpress.org/support/topic/expandable-rows/#post-7156740)
 * Hi David,
 * Our current version of plugin is not doing this functionality means show/hide
   column.We will think over this feature and update you.
 * Thanks.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Expandable rows?’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/wp-jquery-datatable_cde4b3.svg)
 * [WP jQuery DataTable](https://wordpress.org/plugins/wp-jquery-datatable/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wp-jquery-datatable/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wp-jquery-datatable/)
 * [Active Topics](https://wordpress.org/support/plugin/wp-jquery-datatable/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wp-jquery-datatable/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wp-jquery-datatable/reviews/)

 * 5 replies
 * 3 participants
 * Last reply from: [AppJetty](https://wordpress.org/support/users/biztechc/)
 * Last activity: [10 years ago](https://wordpress.org/support/topic/expandable-rows/#post-7156740)
 * Status: not resolved