我在我的应用程序中使用 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 );
});
} );
最佳答案
只需添加
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)
无需定义要隐藏的列也可以正常工作
关于javascript - 数据表 - 根据所选选项动态显示/隐藏列组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50272222/