数据表:列显示在“显示/隐藏列”列表中,即使它具有“显示:无”样式

datatables : Column appears in "show/hide columns" list even if it has "display:none" style

本文关键字:显示 样式 列表 隐藏 数据表      更新时间:2023-09-26

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

但这也没有奏效。

任何帮助表示赞赏。

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

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