title: How to change the position of Individual column filtering in jQuery Datatables
body: <p>I have integrated the jQuery Datatable in my application. and i am using Individual column filtering (using "input" elements). It comes in </p>
  
  <blockquote>
    <p>tfoot</p>
  </blockquote>
  
  <p>tag of HTML. So logically it goes down the table. Now what i want is to change the position of it's. I want it comes above the </p>
  
  <blockquote>
    <p>thead</p>
  </blockquote>
  
  <p>tag of the html. Can anyone guide me how can i change the the postion of individual columns filter. Though they tell us to use DOM position but i am unable to get that logic that how exactly we can do that.</p>
  
  <p>Javascript Code</p>
  
  <pre><code>jQuery.fn.dataTableExt.oSort['string-case-asc']  = function(x,y) {
          return ((x &lt; y) ? -1 : ((x &gt; y) ?  1 : 0));
      };
      jQuery.fn.dataTableExt.oSort['string-case-desc'] = function(x,y) {
          return ((x &lt; y) ?  1 : ((x &gt; y) ? -1 : 0));
      };
      var asInitVals = new Array();
      $(document).ready(function(){
          var oTable = $('#example').dataTable( {
              "sPaginationType": "full_numbers",
              "aaSorting": [ [1,'desc'] ],
              "bFilter": true,
              "bLengthChange": false,
              "iDisplayLength": 10,
              "bStateSave": true,
              "aoColumns": [
                null,
                null,
                null,
                null,
                null,
                null,
                null,
                { "bSortable": false }
                ],
              "aoColumnDefs": [
                  { "sType": 'string-case', "aTargets": [ 2 ] }
              ],
              "oLanguage": {
                  "sEmptyTable": "There is no order found."
              }
          });
          $("#example_filter").hide();
          $("tfoot input").keyup( function () {
              /* Filter on the column (the index) of this element */
              oTable.fnFilter( this.value, $("tfoot input").index(this) );
          });
          /** Support functions to provide a little bit of 'user friendlyness' to the textboxes in the footer **/
          $("tfoot input").each( function (i) {
              asInitVals[i] = this.value;
          });
          $("tfoot input").focus( function () {
              if ( this.className == "search_init" ){
                  this.className = "search_init";
                  this.value = "";
              }
          });
          $("tfoot input").blur( function (i) {
              if ( this.value == "" ){
                  this.className = "search_init";
                  this.value = asInitVals[$("tfoot input").index(this)];
              }
          });
          $(".sb").live( 'click', function(e) {
              Shadowbox.open(this);
              e.preventDefault();
          });
      });
  </code></pre>
  
  <p>html code,</p>
  
  <pre><code>&lt;div id="demo"&gt;
  &lt;table cellpadding="0" cellspacing="0" border="0" class="display" id="example"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th align="left" width="60"&gt;Invoice&lt;/th&gt;
              &lt;th align="left" width="75"&gt;Order Date&lt;/th&gt;
              &lt;th align="left" width="230"&gt;Company&lt;/th&gt;
              &lt;th align="left" width="60"&gt;Promo&lt;/th&gt;
              &lt;th align="left" width="40"&gt;Terms&lt;/th&gt;
              &lt;th align="left" width="50"&gt;Total&lt;/th&gt;
              &lt;th align="left" width="70"&gt;Status&lt;/th&gt;
              &lt;th align="left" width="70"&gt;&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;?php
      //$db-&gt;debug=1;
      if(empty($stid)){
          $q="select * from ".ORDER." where order_status=1";
      }else{
          $q="select * from ".ORDER." where order_status=".intval($stid)."";
      }
      $rs = $db-&gt;Execute($q);
      if($rs-&gt;RecordCount()&gt;0){
          while(!$rs-&gt;EOF){
      ?&gt;
          &lt;tr class="gradeX"&gt;
              &lt;td align="left" valign="top"&gt;&lt;?=$rs-&gt;fields('order_name');?&gt;&lt;/td&gt;
              &lt;td align="left" valign="top"&gt;&lt;?=date('M d, Y',strtotime($rs-&gt;fields('order_date')));?&gt;&lt;/td&gt;
              &lt;?php
              $q1="select city_name from ".CITY." where city_id=".$rs-&gt;fields('delivery_city');
              $cityInfo = $db-&gt;GetRow($q1);
              $q2="select state_name from ".STATE." where state_id=".$rs-&gt;fields('delivery_state');
              $stateInfo = $db-&gt;GetRow($q2);
              $q3="select country_name from ".COUNTRY." where country_id=".$rs-&gt;fields('delivery_country');
              $countryInfo = $db-&gt;GetRow($q3);
              ?&gt;
              &lt;td align="left" valign="top"&gt;&lt;?=$rs-&gt;fields('delivery_company')."&lt;br /&gt;".$rs-&gt;fields('cust_name')."&lt;br /&gt;".$rs-&gt;fields('delivery_street_address').", ".$cityInfo['city_name'].", ".$stateInfo['state_name']." ".$rs-&gt;fields('delivery_postcode')."&lt;br /&gt;".$countryInfo["country_name"];?&gt;&lt;/td&gt;
              &lt;td align="left" valign="top"&gt;&lt;?=$rs-&gt;fields('order_promo');?&gt;&lt;/td&gt;
              &lt;td align="left" valign="top"&gt;&lt;?=$rs-&gt;fields('order_terms');?&gt;&lt;/td&gt;
              &lt;td align="left" valign="top"&gt;&lt;?=$rs-&gt;fields('order_total');?&gt;&lt;/td&gt;
              &lt;td align="left" valign="top"&gt;
              &lt;?php
              if($rs-&gt;fields('order_status')=="1"){
                  echo "Pending";
              }else if($rs-&gt;fields('order_status')=="2"){
                  echo "Approved";
              }
              ?&gt;
              &lt;/td&gt;
              &lt;td align="center" valign="top"&gt;
              &lt;a href="order-detail/&lt;?=$rs-&gt;fields('order_id');?&gt;" rel="shadowbox;width=550;height=300;" class="sb"&gt;&lt;img src="images/icons/details.png" width="13" height="16" alt="Detail" title="Detail" /&gt;&lt;/a&gt;
              &lt;a href="sale-edit/&lt;?=$rs-&gt;fields('order_id');?&gt;" rel="shadowbox;width=550;height=450;" class="sb"&gt;&lt;img src="images/icons/edit.png" width="13" height="16" alt="Edit" title="Edit" /&gt;&lt;/a&gt;
              &lt;a href="javascript:void(0);" onclick="javascript:DeleteSale(&lt;?=$rs-&gt;fields('order_id');?&gt;);"&gt;&lt;img src="images/icons/delete.png" width="14" height="15" alt="Delete" title="Delete" /&gt;&lt;/a&gt;
              &lt;a href="invoice/&lt;?=$rs-&gt;fields('order_id');?&gt;" target="_blank"&gt;&lt;img src="images/icons/invoice.png" width="16" height="16" alt="Generate Invoice" title="Generate Invoice" /&gt;&lt;/a&gt;
              &lt;?php if($rs-&gt;fields('order_status')=="1"){?&gt;
              &lt;a href="order-approve/&lt;?=$rs-&gt;fields('order_id');?&gt;"&gt;&lt;img src="images/icons/approve.png" width="16" height="16" alt="Order Approve" title="Order Approve" /&gt;&lt;/a&gt;
              &lt;?php }?&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;?php
              $rs-&gt;MoveNext();
          }
      }
      ?&gt;
      &lt;/tbody&gt;
      &lt;tfoot&gt;
          &lt;tr&gt;
              &lt;th align="left" valign="top"&gt;Invoice No &lt;input type="text" name="invoice_no" value="Invoice No" class="search_init" /&gt;&lt;/th&gt;
              &lt;th align="left" valign="top"&gt;Order Date &lt;input type="text" name="order_date" value="Order Date" class="search_init" /&gt;&lt;/th&gt;
              &lt;th align="left" valign="top"&gt;Company &lt;input type="text" name="company" value="Company" class="search_init" /&gt;&lt;/th&gt;
              &lt;th align="left" valign="top"&gt;Promo &lt;input type="text" name="promo" value="Promo" class="search_init" /&gt;&lt;/th&gt;
              &lt;th align="left" valign="top"&gt;Terms &lt;input type="text" name="terms" value="Terms" class="search_init" /&gt;&lt;/th&gt;
              &lt;th align="left" valign="top"&gt;Total &lt;input type="text" name="total" value="Total" class="search_init" /&gt;&lt;/th&gt;
              &lt;th align="left" valign="top"&gt;&amp;nbsp;&lt;input type="hidden" name="status" value="status" class="search_init" /&gt;&lt;/th&gt;
              &lt;th align="left" valign="top"&gt;&amp;nbsp;&lt;input type="hidden" name="emptyrow" value="" class="search_init" /&gt;&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/tfoot&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks in Advance,</p>