1

9 列のデータテーブルがあり、列 [0] と [8] は非表示になっています。次に、列 [7] と [8] が 1 つの列にマージされます (以下のコードを参照)。

私が苦労しているのは、列を非表示にするときに 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) 可視状態をチェーンするコールバック メソッドを記述して、一方が非表示になると他方が自動的に非表示になるようにすることです。それらが見えるようになるため。

データテーブル init に 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 に答える