title: Filters on top of table using sDom and columnFilter
body: <p>Is there an easy way to move the filters from the footer of the table to the head section using the <code>sDom</code> attribute?</p>
  
  <p>Currently I am using this: <code>"sDom": 'WT&lt;"clear"&gt;&lt;"H"lfr&gt;t&lt;"F"ip&gt;'</code> (using JQuery UI)</p>
  
  <p>If i try moving the filter at the top using <code>sPlaceHolder</code> like this:</p>
  
  <pre><code>.columnFilter({sPlaceHolder: "head:before"});
  </code></pre>
  
  <p>I get my table to grow to the right, overlapping all my divs and creating a horizontal page scroll-bar. </p>
  
  <p><strong>UPDATE 1</strong>
  I am using <a href="http://jquery-datatables-column-filter.googlecode.com/svn/trunk/index.html" rel="nofollow noreferrer">this</a> column filter addon</p>
  
  <p><strong>UPDATE 2</strong>
  My current initialisation code is this: </p>
  
  <pre><code>var oTable = $('#' + tblName).dataTable({
      "aaSorting": [[1, 'asc']],
      "bJQueryUI": true,
      "sPaginationType": "full_numbers",
      "iDisplayLength": -1,
      "aLengthMenu": [
          [10, 25, 50, 100, 200, -1],
          [10, 25, 50, 100, 200, "All"]
      ],
      "sDom": 'WT&lt;"clear"&gt;&lt;"H"lfr&gt;t&lt;"F"ip&gt;',
      "oColumnFilterWidgets": {
          "aiExclude": [0, 1, 2, 6,7,8]
      },
      "oTableTools": {
          "sSwfPath": "../js/TableTools/media/swf/copy_csv_xls_pdf.swf"
          ,
          "aButtons": [
              {
                  "sExtends": "xls",
                  "sTitle": "Results",
                  "sButtonText": "Export to Xls",
                  "mColumns": [1, 2, 3, 4, 5,6,7,8]
              },
              {
                  "sExtends": "pdf",
                  "sPdfOrientation": "landscape",
                  "sTitle": "Results",
                  "sButtonText": "Export to Pdf",
                   "mColumns": [1, 2, 3, 4, 5,6,7,8,9,10]
              }]
      }
  }).columnFilter( );
  </code></pre>
  
  <p>And shows this as output :
  <img src="https://i.stack.imgur.com/zsYiY.png" alt="enter image description here"></p>
  
  <p>When i try to use <code>{sPlaceHolder: "head:before"}</code> like this:</p>
  
  <pre><code>....    .columnFilter({sPlaceHolder: "head:before"});
  </code></pre>
  
  <p>it shows the following output:</p>
  
  <p><img src="https://i.stack.imgur.com/MPieS.png" alt="enter image description here"></p>
  
  <p>Note/Problem: See how the entire table breaks my divs and overflows to the right, giving me a horizontal scrollbar at the bottom.</p>