数据表：列出现在“显示/隐藏列”列表中，即使它具有“显示：无”样式答案

【问题标题】：datatables : Column appears in "show/hide columns" list even if it has "display:none" style数据表：列出现在“显示/隐藏列”列表中，即使它具有“显示：无”样式
【发布时间】：2015-02-25 11:49:11
【问题描述】：

我正在使用 Datatables 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>&nbsp;
                <A HREF="javascript:somescript()" CLASS="INP">294879</A>&nbsp;
                </td>
                <td style="display: none;"><INPUT TYPE="HIDDEN" NAME="hdnID" VALUE="294879"></td>
                <td class="line" align="left" nowrap>&nbsp;Cosmetic&nbsp;</TD>
                <td class="line" align="left" nowrap>&nbsp;Low&nbsp;</TD>
                <td class="line" align="left" nowrap>&nbsp;&nbsp;</TD>
                <td class="line" align="center" nowrap>&nbsp;&nbsp;</TD>
                <td class="line" align="left" nowrap>&nbsp;Module&nbsp;</TD>
                <td class="line" align="center" nowrap>&nbsp;02/27/2013&nbsp;</TD>
                <td class="line" align="center" nowrap>&nbsp;02/30/2013&nbsp;</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],
            });

但这也不起作用。

任何帮助表示赞赏。

【问题讨论】：

标签： javascript jquery datatables jquery-datatables

【解决方案1】：

更改 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,
            });

基本提供数组来“排除”选项

【讨论】：