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

Question

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

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

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

我需要根据下拉选择动态显示数据表列组。那是 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 );
    });
} );

Answer 1

只需添加

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

之后

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

并从 if 语句中删除所有可见的（真）

在这里提琴fiddle

[编辑]

 table.columns( ).visible( true)

不定义要隐藏的列也可以正常工作

Answer 2

对你的代码稍作改动就可以正常工作：

    $(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.api().columns( [0, 1, 2, 3, 4 ] ).visible( true);
       table.api().columns( [5,6,7,8,9,10,11,12,13] ).visible( false);
    } else if(selCol == 2){
       table.api().columns([0, 1, 5, 6, 7]).visible(true);
       table.api().columns( [2,3,4,8,9,10,11,12,13] ).visible( false);
    } else if(selCol == 3){
       table.api().columns([0,1,8, 9, 10]).visible(true);
       table.api().columns( [2,3,4,5,6,7,11,12,13] ).visible( false);
    } else if(selCol == 4){
       table.api().columns([0,1,11,12,13]).visible(true);
       table.api().columns( [2,3,4,5,6,7,8,9,10] ).visible( false);
    } else {
table.api().columns([0,1,2,3,4,5,6,7,8,9,10,11,12,13]).visible(true);
    }

    table.api().columns.adjust().draw( false );
    });
} );

希望这会有所帮助。