How do I get my data to show correctly using Show/Hide with ColdFusion?

Jc3web

I'm dynamically hiding columns in DataTables which hides the columns as intended but when I click the header of a displayed column to sort, the data from a hidden column displays in a visible column. I'm using ColdFusion to dynamically generate my table information. Example: if I hide column 2 (data-column="1") and click to sort on Header 3 (data-column="2") that column shows the data from column 2 not column 3. It seems when sorting I'm always showing the data in order column 1, column 2, etc. regardless of which columns I have hidden or shown.

Show/Hide: Header 1 - Header 2 - Header 3 - Header 4

<thead>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
</thead>
<tbody>
<cfloop query="mydata">
<tr>
<td>#myData.column1#</td>
<td>#myData.column2#</td>
<td>#myData.column3#</td>
<td>#myData.column4#</td>
</tr>
</cfloop>
</tbody>
</table>

$('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() );
})