I am using Jquery datatable in my application. My table contains the below mentioned columns:
Name, Office, A1, B1, Diff1, A2, B2, Diff2, A3, B3, Diff3, A4, B4, Diff4
Also I have a select box with the following options: 1. All 2. Diff1 3. Diff2 4. Diff3 5. Diff4
I am in need to display the datatable column groups dynamically based on the dropdown selection. That is 1. All (All columns) 2. Diff1 (Name, Office, A1, B1, Diff1) 3. Diff2 (Name, Office, A2, B2, Diff2) 4. Diff3 (Name, Office, A3, B3, Diff3) 5. Diff4 (Name, Office, A4, B4, Diff4)
I have added my example in this JSFiddle link. Here my requirement is working only for the first time. If I change the dropdown again, expected column groups was not displaying. How to fix this?
HTML Code:
<div> <label>Column Filter:</label> <select id="myCol"> <option value="0">All</option> <option value="1">Diff1</option> <option value="2">Diff2</option> <option value="3">Diff3</option> </select> </div> <table id="example" class="display" style="width:100%"> <thead> <tr> <th>Name</th> <th>Office</th> <th>A1</th> <th>B1</th> <th>Diff1</th> <th>A2</th> <th>B2</th> <th>Diff2</th> <th>A3</th> <th>B3</th> <th>Diff3</th> <th>A4</th> <th>B4</th> <th>Diff4</th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>Edinburgh</td> <td>13</td> <td>21</td> <td>65</td> <td>89</td> <td>67</td> <td>65</td> <td>12</td> <td>39</td> <td>91</td> <td>32</td> <td>90</td> <td>11</td> </tr> <tr> <td>Garrett Winters</td> <td>Tokyo</td> <td>13</td> <td>21</td> <td>65</td> <td>89</td> <td>67</td> <td>65</td> <td>12</td> <td>39</td> <td>91</td> <td>32</td> <td>90</td> <td>11</td> </tr> <tr> <td>Tiger Nixon</td> <td>Edinburgh</td> <td>13</td> <td>21</td> <td>65</td> <td>89</td> <td>67</td> <td>65</td> <td>12</td> <td>39</td> <td>91</td> <td>32</td> <td>90</td> <td>11</td> </tr> <tr> <td>Garrett Winters</td> <td>Tokyo</td> <td>13</td> <td>21</td> <td>65</td> <td>89</td> <td>67</td> <td>65</td> <td>12</td> <td>39</td> <td>91</td> <td>32</td> <td>90</td> <td>11</td> </tr> <tr> <td>Tiger Nixon</td> <td>Edinburgh</td> <td>13</td> <td>21</td> <td>65</td> <td>89</td> <td>67</td> <td>65</td> <td>12</td> <td>39</td> <td>91</td> <td>32</td> <td>90</td> <td>11</td> </tr> <tr> <td>Garrett Winters</td> <td>Tokyo</td> <td>13</td> <td>21</td> <td>65</td> <td>89</td> <td>67</td> <td>65</td> <td>12</td> <td>39</td> <td>91</td> <td>32</td> <td>90</td> <td>11</td> </tr> </tbody> </table> JS Code:
$(document).ready(function() { var table = $('#example').DataTable( { "scrollY": "200px", "paging": false } ); $(document).on("change","#myCol",function(event){ var selCol = $(this).val(); if(selCol == 1){ table.columns( [0, 1, 2, 3, 4 ] ).visible( true); table.columns( [5,6,7,8,9,10,11,12,13] ).visible( false); } else if(selCol == 2){ table.column([0, 1, 5, 6, 7]).visible(true); table.columns( [2,3,4,8,9,10,11,12,13] ).visible( false); } else if(selCol == 3){ table.column([0,1,8, 9, 10]).visible(true); table.columns( [2,3,4,5,6,7,11,12,13] ).visible( false); } else if(selCol == 4){ table.column([0,1,11,12,13]).visible(true); table.columns( [2,3,4,5,6,7,8,9,10] ).visible( false); } else { table.column([0,1,2,3,4,5,6,7,8,9,10,11,12,13]).visible(true); } table.columns.adjust().draw( false ); }); } ); 
