Collapsible table with data table plug-in

Question

I am using data table plug-in for pagination..Now I want collapsible feature on click of every row of table...

This is a snippet of my code :

 <tr class="outer-tr">
     <td>1</td>
     <td>pppol</td>
     <td>Approved</td>
</tr>
<tr class="inner-tr"> 
       <td>show-hide</td> 
</tr>

And I am hiding/showing inner-tr on click of outer-tr.
But it gives an error:

 Uncaught TypeError: Cannot read property 'className' of undefined

I know this happens because of improper table format..

Any suggestion to achieve collapsible table with data table plug-in???

You need to provide you javascript for rendering the table – cpoDesign Mar 31 '14 at 14:42 — cpoDesign, Mar 31 '14 at 14:42

score 0 · Answer 1 · edited Jan 16 '15 at 14:28

0

Add jquery script in your code:

$(function() {  
   $('.outer-tr').click(function() {
      $('.outer-tr td').toggleClass('visible');
   });
   $('.inner-tr').click(function() {
      $('.inner-tr td').toggleClass('visible');
   });
});

Also add a css style

tr td{display: none;}
tr td.visible{display: block;}

edited Jan 16 '15 at 14:28

davidkonrad

77,311
15
189
243

answered Apr 07 '14 at 12:02

paularka90

23
1
6

score 0 · Answer 2 · answered May 14 '21 at 13:10

0

the JQuery DataTable documentation explains it here, provide your JS code if you need more help.

answered May 14 '21 at 13:10

Hicham O-Sfh

263
4
10

Collapsible table with data table plug-in

Any suggestion to achieve collapsible table with data table plug-in???

2 Answers2