title: Getting columnFilter plugin working with DataTables
body: <p>I'm using 1.10.2 DataTables, and I'd like to take advantage of columnFilter plugin instead of gunking together something manually. I'm using bootstrap renderer with datatables, jQuery 1.10.2, jQuery UI 1.10.3 and bootstrap 3.1.1. This particular table doesn't use any fancy stuff (no fixed header, no fixed columns, no ColVis or ColReorder). Paging is turned on.</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="~/CSS/dataTables.bootstrap.css" /&gt;
  &lt;!-- stuff --&gt;
  &lt;table id="reportTable" class="table table-condensed table-striped table-bordered"&gt;
      &lt;thead&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;!-- stuff --&gt;
  &lt;script type='text/javascript' src='~/Scripts/jquery.dataTables.js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='~/Scripts/dataTables.bootstrap.js'&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="~/Scripts/jquery.dataTables.columnFilter.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>vm.table = $('#reportTable').DataTable({
      dom: 'rtipfl',
      autoWidth: false,
      info: true,
      lengthChange: true,
      lengthMenu: [ 10, 15, 20 ],
      displayLength: 10,
      pageLength: 10,
      ordering: true,
      orderMulti: true,
      orderClasses: true,
      order: [[ 2, "asc" ]],
      paging: true,
      pagingType: "full_numbers",
      renderer: "bootstrap",
      deferRender: true,
      processing: true,
      scrollX: false,
      scrollY: false,
      scrollCollapse: false,
      searching: true,
      columns: vm.columns,
      columnDefs: vm.columnDefs,
      data: vm.postingArray,
      initComplete: function (settings, json) {
          vm.attachTableEventHandlers();
      }
  });
  </code></pre>
  
  <p>It's a table with 22 columns though.
  First thing I notice is that columnFilter examples only mention the lowercase initialization of DataTables, like:</p>
  
  <pre><code>$('#blabla').dataTable().columnFilter();
  </code></pre>
  
  <p>If I say</p>
  
  <pre><code>vm.table = $('#reportTable').DataTable({
       ...
  }).columnFilter();
  </code></pre>
  
  <p>I get a big fat</p>
  
  <pre><code>"TypeError: $(...).DataTable(...).columnFilter is not a function
   vm.table = $('#reportTable').DataTable({"
  </code></pre>
  
  <p>If I say</p>
  
  <pre><code>vm.table = $('#reportTable').DataTable({
       ...
  });
  $('#reportTable').columnFilter();
  
  "TypeError: oTable.fnSettings is not a function
  if (!oTable.fnSettings().oFeatures.bFilter)"
  </code></pre>
  
  <p>If I say</p>
  
  <pre><code>vm.table = $('#reportTable').DataTable({
       ...
  });
  $('#reportTable').dataTable().columnFilter();
  </code></pre>
  
  <p>No filters appear.</p>
  
  <p>What am I doing wrong? How should I initialize it?</p>