1

我有一个包含 9 列的数据表，列 [0] 和 [8] 被隐藏。然后将列 [7] 和 [8] 合并为一列（参见下面的代码）。

我正在努力解决的问题是当我隐藏一列时使用 ColVis 插件，列 [7] 和 [8] 的合并搞砸了。

希望这是有道理的，任何帮助将不胜感激。

var $buTable= $("#business_table").dataTable( {
        "oLanguage": {
            "sSearch": "Filter:"
        },
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "scripts/business_serverside.php",
    "iDisplayLength": 10,       
        "bJQueryUI": false,
        "sPaginationType": "scrolling",
        "sDom": '<"clear"><"top"CTilr<"clear">pt>',
        "aoColumns": [ 
            {"bVisible":false},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":true},
            {"bVisible":false}
        ],
        "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
        $('td:eq(6)', nRow).html(''+ aData[7] +'&nbsp;'+ aData[8] +'');        
        },
        "oTableTools": {
            "sSwfPath": "swf/copy_csv_xls_pdf.swf"
        },
        "oColVis": {
            "activate": "mouseover",    
            "aiExclude": [0,8]
        }
    }).columnFilter({
            aoColumns: [ 
                    { type: "select"},
                    { type: "text" },
                    { type: "select" },
                    { type: "select"},
                    { type: "text"},
                    { type: "text"},
                    { type: "select"},
                    { type: "text"}
                ]
        });
4

1 回答 1

0

现在，您正在排除允许隐藏的列：

"oColVis": {
    "activate": "mouseover",    
    "aiExclude": [0,8]
}

但是我认为您需要做的是a）将它们都排除在隐藏状态之外，这样它们就不会被篡改，或者b）编写一个回调方法，将它们的可见性状态链接起来，这样如果一个被隐藏，另一个会自动隐藏，同样明智因为它们变得可见。

像在你的数据表初始化中添加一个 fnDrawCallback ：

// method gets called each table draw / re-draw
"fnDrawCallback": function( oSettings ) {
    // column buttons get ids based on their column title 
    // so let's assume your columns are titled 'column7' and 'column8'
    $('#column7').change( function() {
        $('#column8').trigger('click');
    });

    $('#column8').change( function() {
        $('#column7').trigger('click');
    });
},

代码未经测试，但如果您发现无法在 $('#column8) 和 $('#column7') 上调用事件更改事件，则必须手动检查第 7 列的可见性。随机猜测如何做到这一点将是这样的：

"fnDrawCallback": function( oSettings ) {
    if( fnSetColumnVis( 7, false ) ) {
        fnSetColumnVis( 8, false );
    }
    else {
        fnSetColumnVis( 8, true );
    }
},

希望有帮助！

于 2013-12-05T23:59:57.270 回答