Issue on responsive jquery datatables + external form column filter

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Enable responsive jquery datatables and hide column in mobile view.
2. Enable external form column filter.
3. View the page in mobile.

What is the expected output? What do you see instead?
The filter is not apply to correct column

What version of the product are you using? On what operating system?
- jQuery 1.9.1
- jQuery DataTables 1.10.7
- JQuery DataTable Column Filter 1.5.6

Please provide any additional information below.

Code example
========================
<script>
  $(document).ready(function () {
    $('#dataTables').dataTable().columnFilter({
      aoColumns: [
        { sSelector: "#IdFilter", type: "text" },
        { sSelector: "#TradeDateFilter", type: "select" },
        { sSelector: "#DueDateFilter", type: "select" },
        { sSelector: "#SchemeFilter", type: "select" },
        { sSelector: "#ProcessNameFilter", type: "select" },
        { sSelector: "#TaskNameFilter", type: "select" }
      ]
    });
  });
</script>

<div class="panel panel-default">
  <div class="panel-heading">
    Filter
  </div>
  <!-- /.panel-heading -->
  <div class="panel-body">
    <table cellspacing="0" cellpadding="0" border="0" class="table table-striped table-bordered table-hover">
      <thead>
        <tr>
          <th width="15%"></th>
          <th width="35%"></th>
          <th width="15%"></th>
          <th width="35%"></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td align="center">Id</td>
          <td align="center" id="IdFilter"></td>
          <td align="center">Scheme</td>
          <td align="center" id="SchemeFilter"></td>
        </tr>
        <tr>
          <td align="center">Trade Date</td>
          <td align="center" id="TradeDateFilter"></td>
          <td align="center">Due Date</td>
          <td align="center" id="DueDateFilter"></td>
        </tr>
        <tr>
          <td align="center">Process</td>
          <td align="center" id="ProcessNameFilter"></td>
          <td align="center">Task</td>
          <td align="center" id="TaskNameFilter"></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>


<table class="table table-striped table-bordered table-hover responsive" 
id="dataTables" width="100%">
  <thead>
    <tr>
      <th class="all">ID</th>
      <th>Trade Date</th>
      <th>Due Date</th>
      <th>Scheme</th>
      <th>Process</th>
      <th class="min-mobile-l">Task Name</th>
      <th class="min-tablet">Dependent Tasks</th>
      <th class="desktop">Next Tasks</th>
      <th class="min-tablet">Status</th>
      <th class="none">No of Input Files</th>
      <th class="none">No of Output Files</th>
      <th class="none">Task Error</th>
      <th class="none">External Request</th>
      <th class="min-tablet">Action</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>ID</th>
      <th>Trade Date</th>
      <th>Due Date</th>
      <th>Scheme</th>
      <th>Process</th>
      <th>Task Name</th>
      <th>Dependent Tasks</th>
      <th>Next Tasks</th>
      <th>Status</th>
      <th>No of Input Files</th>
      <th>No of Output Files</th>
      <th>Task Error</th>
      <th>External Request</th>
      <th>Action</th>
    </tr>
  </tfoot>
  <tbody>
    <tr class="odd">
      <td>1</td>
      <td>15/07/2015</td>
      <td>09:15:00</td>
      <td>BCP</td>
      <td>Process T-2 trade order</td>
      <td>Prepare fund date file</td>
      <td></td>
      <td>2</td>
      <td>NotStarted</td>
      <td>0</td>
      <td></td>
      <td>0</td>
      <td>0</td>
      <td>
        <a href="/ProcessInstances/Execute/1" data-toggle="tooltip" title="Execute the corresponse process of the task">
          <i class="fa fa-play-circle fa-2x"></i>
        </a>
      </td>
    </tr>
  </tbody>
</table >
=================

Original issue reported on code.google.com by [email protected] on 16 Jul 2015 at 2:06