How to hide rows associated with columns when column is hidden using Toggle option?

Calmwinds17

Hello

I have a data table which is been used in conjunction with AngularJS.

When I try to hide a column using the below code, it does hide the table column header. It does not hide the data associated with that column.

I have not set any FixedHeader or made use of sScrollX or sScrollY.

$(document).ready(function() {
            var table = $('#table12').DataTable();

            $('a.toggle-vis').on( 'click', function (e) {
                e.preventDefault();
                // Get the column API object
                var column = table.column( $(this).attr('data-column') );
                // Toggle the visibility
                column.visible( ! column.visible() );
            } );
        } );

Before image:

[IMG]http://i61.tinypic.com/33cad79.png[/IMG]

After image:

[IMG]http://i57.tinypic.com/2q2jvoy.png[/IMG]