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

您的代码稍有变化，它可以正常工作：

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

希望这有帮助。

Answer 2

添加

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

之后

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

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

在此处fiddle

<强> [编辑]

 table.columns( ).visible( true)

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

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

2 个答案: