数据表:列显示在“显示/隐藏列”列表中,即使它具有“显示:无”样式
datatables : Column appears in "show/hide columns" list even if it has "display:none" style
我正在使用数据表 1.10.4 和 colvis 1.1.1
表格的 HTML -
<div class="section-header clearfix">
<div style="float: left">
<span class="section-title">Cosmetic</span>
</div>
</div>
<table class=" display " ID="tab1" >
<thead>
<TR>
<th nowrap>ID</th>
<th style="display: none;">hdnID</th>
<th nowrap>Type</th>
<th nowrap>Severity</th>
<th nowrap>Priority</th>
<th nowrap>Due<BR>Date</th>
<th nowrap>Module</th>
<th nowrap>Date-Time Created</th>
<th nowrap>Estimated Complition Date</th>
</TR>
</thead>
<tbody>
<tr>
<td class="linecol1" class="linecol1" align="CENTER" nowrap>
<A HREF="javascript:somescript()" CLASS="INP">294879</A>
</td>
<td style="display: none;"><INPUT TYPE="HIDDEN" NAME="hdnID" VALUE="294879"></td>
<td class="line" align="left" nowrap> Cosmetic </TD>
<td class="line" align="left" nowrap> Low </TD>
<td class="line" align="left" nowrap> </TD>
<td class="line" align="center" nowrap> </TD>
<td class="line" align="left" nowrap> Module </TD>
<td class="line" align="center" nowrap> 02/27/2013 </TD>
<td class="line" align="center" nowrap> 02/30/2013 </TD>
</tr>
</tbody>
</table>
Javascript -
var dtTable = $("table[id^='tab']").dataTable( {
"pagingType": "full_numbers",
"scrollX": true,
"lengthChange":false,
"autoWidth":false,
"orderClasses": false,
"searching":false,
"dom": 'RT<"clear">lfrtip',
"oTableTools": {
"sSwfPath": './swf/copy_csv_xls_pdf.swf',
"aButtons": [
{
"sExtends": 'collection',
"sButtonText": 'Export',
"aButtons": [ 'xls','csv', 'pdf','copy', 'print']
}
]
}
} );
var colvis = new $.fn.dataTable.ColVis(dtTable);
$(colvis.button()).insertAfter("div.tab-content > div.section-header");
这将创建"显示/隐藏列"按钮,其中包含<thead>
中所有列的列表。问题是它在显示/隐藏列表中包含hdnID
列,即使它具有display:none
样式并且整列在屏幕上不可见。
我尝试使用"排除"选项 -
var colvis = new $.fn.dataTable.ColVis(dtTable,{
exclude: [1],
});
但是我希望JS代码动态确定哪些列号是不可见的,并从列表中排除这些列号。为了找出不可见的列号,我尝试了这个 -
$(dtTable.fnSettings().aoColumns).each(function(){
if(this.nTh.style.display == 'none')
{
excludeColumns = this.idx + ',';
}
});
var colvis = new $.fn.dataTable.ColVis(dtTable,{
exclude: [excludeColumns],
});
但这也没有奏效。
任何帮助表示赞赏。
将 colvis 脚本更改为 - 后开始工作
var excludeColumns = [];
$(dtTable.fnSettings().aoColumns).each(function(){
if(this.nTh.style.display == 'none')
{
excludeColumns.push(this.idx);
}
});
var colvis = new $.fn.dataTable.ColVis(dtTable,{
exclude: excludeColumns,
});
基本上提供了数组来"排除"选项
相关文章:
- 应用程序在呈现Jquery Mobile之前显示无样式的Html
- 避免在用ng href加载样式表之前显示内容
- 如何使活动菜单项具有突出显示样式
- dd显示样式更改为none
- 设置正文显示样式 无 与一个子显示样式块
- 删除 javascript 中 html 按钮的默认显示样式属性
- 向幻灯片放映添加滚动显示样式
- 为什么不'DOM样式节点显示样式表应用的样式
- 在外部设置显示样式会导致onclick()事件初始化两次点击
- 有没有“电影演职员表”滚动显示?样式插件的单词列表
- 检查DIV元素的显示样式
- 使用JavaScript动态更改img标签中的显示样式
- Jquery和Javascript没有返回显示样式的实际值
- 使用Javascript在不影响打印样式的情况下更改显示样式(CSS)
- 表格行的显示样式与标题保持对齐
- 在哪里可以找到 HTML 标记的默认“显示”样式属性
- “显示”样式属性不正确
- 不显示样式
- -WEBKIT-TRANSITION显示样式
- 在表行上使用.remove会产生显示样式:none