javascript - 数据表-根据所选选项动态显示/隐藏列组

我在我的应用程序中使用Jquery数据表。我的表包含以下提到的列：

名称，办公室，A1，B1，Diff1，A2，B2，Diff2，A3，B3，Diff3，A4，B4，Diff4

我也有一个带有以下选项的选择框：
1.全部2. Diff1 3. Diff2 4. Diff3 5. Diff4

我需要根据下拉选择动态显示datatable列组。那是
1.全部（所有列）
2. Diff1（名称，办公室，A1，B1，Diff1）
3. Diff2（名称，办公室，A2，B2，Diff2）
4. Diff3（名称，办公室，A3，B3，Diff3）
5. Diff4（名称，办公室，A4，B4，Diff4）

我已在此JSFiddle链接中添加了示例。在这里，我的要求是第一次工作。如果我再次更改下拉列表，则不会显示预期的列组。如何解决？

HTML代码：

<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代码：

$(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 );
    });
} );

最佳答案

只需添加

table.columns( [0, 1, 2, 3, 4,5,6,7,8,9,10,11,12,13] ).visible( true);

后

var selCol = $(this).val();

并从if语句中删除所有visible（true）

在这里小提琴fiddle

[编辑]

 table.columns( ).visible( true)

没有定义要隐藏的列也很好