javascript - 数据表 : Column appears in "show/hide columns" list even if it has "display:none" style

Question

我正在使用 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],
            });

但这也不起作用。

感谢任何帮助。

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

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