Jquery Datables not hiding rows from table

I am using datatables with ColVis extension. My tables data is loaded from the server. When I click on show/hide columns button the unchecked column is being removed but the corresponding rows are not removed. Lets say, if I click on all checkboxes, in that case all the columns are hidden but all the rows are still there in the table without headers or column names.

Also sometimes, when I click on column1 to hide it is being hidden but its corresponding row data is being displayed in its next column correspondingly the next column data is being interchanged its place.

Please help me to fix this.

CODE:

            $('#example').dataTable( {
             "dom": 'C>"clear"<lfrtip',
               searching:false,
               paging:false, 
            "bServerSide": true,
            "sAjaxSource": '/examples/data.txt',
             "deferLoading": true,
             bDeferRender: true,
           "fnServerData": function ( sSource, aoData, fnCallback ) 
            $.getJSON( sSource, aoData, function (json) {
                  fnCallback(json)
                  }   );
             }
         } );

TABLE

           <div class="table-success">
             <table id ="example" class="table table-bordered">
              <thead>
                <tr>
                  <th>Merchant</th>
                 <th>Bank Name</th>
                  <th>Payment Gateway</th>
                   <th>Status</th>
                   <th>Amount</th>
                  <th>Discount</th>
                  <th>Additional Charges</th>
                   <th>Added On</th>
               </tr>
              </thead>
              <tbody id="details">
                <% @all_settlement_details.each do |sd| %>
               <tr>
                   <td><%= sd.merchantname %></td>
                  <td><%= sd.bank_name  %></td>
                <td><%= sd.payment_gateway %></td>
                <td><%= get_status(sd.status) %></td>
                 <td><%= sd.amount %></td>
                <td><%= sd.discount %></td>
                <td><%= sd.additional_charges%></td>
               <td><%= get_added_on_date sd.addedon %></td>
              </tr>
               <% end %>
             </tbody>
           </table>

Basically the data from the table is not been removed or hidden upon clicking on Colvs Checkboxes. Please see the problem with images here.

In the second image I unchecked Status column. So it must be hidden or removed. But was not removed or hidden still the row is there.

Please see the third image, where I unchecked every column, so there should be no rows or data present in table.