Toggling column visible from false to true moves column

rmichels

EDIT 2: The problem actually seems to be with some of our JS that is interactive weirdly with the datatable. So I believe the solution is outside the scope of this support forum.

My boss asked me to add some column visibility functionality to our DataTables. I'm not the most experienced developer and I can't seem to resolve this issue.

When I toggle column visibility the columns do not maintain their initial left to right order.
I do NOT mean that they change how the data in the columns is sorted, I mean going from left the right the columns initialize in a certain order and after toggling visibility that order is not maintained.
Is there a way to enforce the left-right order of the columns?

Below is the HTML/jstl for the table and the JS driving the behavior.

EDIT: I may have found a the culprit in that the implementation of the tables for this application use a wrapper div which when removed seems to fix my issue.

var account_table = $('#_account_data').dataTable( {        
            "aaSorting": [[ 0, "asc" ]],
            "bLengthChange": false,
            "iDisplayLength": 25,
            "bFilter": true,
            "sPaginationType": "full_numbers",
            "aoColumnDefs":[
                {
                    "aTargets":[5,6],
                    "bVisible":true
                }
            ],
            dom: 'frtipB',
            buttons: [
                'copyFlash',
                'excelHtml5',
                'csvHtml5',
                'pdfHtml5',
                {
                    text: 'My button',
                    action: function(e, dt){
                        var bVis = account_table.fnSettings().aoColumns[5].bVisible;
                        account_table.fnSetColumnVis( 5, bVis ? false : true );
                    }
                }
            ]
       });  

                    <security:authorize ifAnyGranted="ROLE_ACCOUNT_READ,ROLE_ADMIN">

                        <table border="0" width="100%" id="_account_data">
                          <thead>
                             <tr>
                                <c:choose>
                                    <c:when test="${isCheckedAccountColumnValid}">  
                                        <th align="left" style="width: 2%;">&nbsp;</th>
                                        <th align="left" style="width: 53%;">Account Name</th>
                                    </c:when>
                                    <c:otherwise>
                                <th align="left" style="width: 55%;">Account Name</th>
                                    </c:otherwise>
                                </c:choose>                              
                                <th align="center" style="width: 15%;">A/N</th>
                                <th align="center" style="width: 15%;">A/B</th>
                                <th align="center" style="width: 15%;">A/B Date</th>
                                <th align="center" style="width: 15%;">Exclude Billing</th>
                                <th align="center" style="width: 15%;">Axys Link Id</th>
                            </tr>
                         </thead>   
                            <c:forEach items="${accountListing}" var="aL">
                                <tr style="height:20px">
                                    <c:if test="${isCheckedAccountColumnValid}">    
                                        <td align="center">
                                            <input id="chk_acc" type="checkbox" name="chk_acc" value="${aL.id}"/>
                                        </td>
                                    </c:if>