How to change the position of Individual column filtering in jQuery Datatables

I have integrated the jQuery Datatable in my application. and i am using Individual column filtering (using "input" elements). It comes in

tfoot

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

thead

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.

Javascript Code

jQuery.fn.dataTableExt.oSort['string-case-asc']  = function(x,y) {
        return ((x < y) ? -1 : ((x > y) ?  1 : 0));
    };
    jQuery.fn.dataTableExt.oSort['string-case-desc'] = function(x,y) {
        return ((x < y) ?  1 : ((x > 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();
        });
    });

html code,

<div id="demo">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
    <thead>
        <tr>
            <th align="left" width="60">Invoice</th>
            <th align="left" width="75">Order Date</th>
            <th align="left" width="230">Company</th>
            <th align="left" width="60">Promo</th>
           开发者_如何学C <th align="left" width="40">Terms</th>
            <th align="left" width="50">Total</th>
            <th align="left" width="70">Status</th>
            <th align="left" width="70"></th>
        </tr>
    </thead>
    <tbody>
    <?php
    //$db->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->Execute($q);
    if($rs->RecordCount()>0){
        while(!$rs->EOF){
    ?>
        <tr class="gradeX">
            <td align="left" valign="top"><?=$rs->fields('order_name');?></td>
            <td align="left" valign="top"><?=date('M d, Y',strtotime($rs->fields('order_date')));?></td>
            <?php
            $q1="select city_name from ".CITY." where city_id=".$rs->fields('delivery_city');
            $cityInfo = $db->GetRow($q1);
            $q2="select state_name from ".STATE." where state_id=".$rs->fields('delivery_state');
            $stateInfo = $db->GetRow($q2);
            $q3="select country_name from ".COUNTRY." where country_id=".$rs->fields('delivery_country');
            $countryInfo = $db->GetRow($q3);
            ?>
            <td align="left" valign="top"><?=$rs->fields('delivery_company')."<br />".$rs->fields('cust_name')."<br />".$rs->fields('delivery_street_address').", ".$cityInfo['city_name'].", ".$stateInfo['state_name']." ".$rs->fields('delivery_postcode')."<br />".$countryInfo["country_name"];?></td>
            <td align="left" valign="top"><?=$rs->fields('order_promo');?></td>
            <td align="left" valign="top"><?=$rs->fields('order_terms');?></td>
            <td align="left" valign="top"><?=$rs->fields('order_total');?></td>
            <td align="left" valign="top">
            <?php
            if($rs->fields('order_status')=="1"){
                echo "Pending";
            }else if($rs->fields('order_status')=="2"){
                echo "Approved";
            }
            ?>
            </td>
            <td align="center" valign="top">
            <a href="order-detail/<?=$rs->fields('order_id');?>" rel="shadowbox;width=550;height=300;" class="sb"><img src="images/icons/details.png" width="13" height="16" alt="Detail" title="Detail" /></a>
            <a href="sale-edit/<?=$rs->fields('order_id');?>" rel="shadowbox;width=550;height=450;" class="sb"><img src="images/icons/edit.png" width="13" height="16" alt="Edit" title="Edit" /></a>
            <a href="javascript:void(0);" onclick="javascript:DeleteSale(<?=$rs->fields('order_id');?>);"><img src="images/icons/delete.png" width="14" height="15" alt="Delete" title="Delete" /></a>
            <a href="invoice/<?=$rs->fields('order_id');?>" target="_blank"><img src="images/icons/invoice.png" width="16" height="16" alt="Generate Invoice" title="Generate Invoice" /></a>
            <?php if($rs->fields('order_status')=="1"){?>
            <a href="order-approve/<?=$rs->fields('order_id');?>"><img src="images/icons/approve.png" width="16" height="16" alt="Order Approve" title="Order Approve" /></a>
            <?php }?>
            </td>
        </tr>
    <?php
            $rs->MoveNext();
        }
    }
    ?>
    </tbody>
    <tfoot>
        <tr>
            <th align="left" valign="top">Invoice No <input type="text" name="invoice_no" value="Invoice No" class="search_init" /></th>
            <th align="left" valign="top">Order Date <input type="text" name="order_date" value="Order Date" class="search_init" /></th>
            <th align="left" valign="top">Company <input type="text" name="company" value="Company" class="search_init" /></th>
            <th align="left" valign="top">Promo <input type="text" name="promo" value="Promo" class="search_init" /></th>
            <th align="left" valign="top">Terms <input type="text" name="terms" value="Terms" class="search_init" /></th>
            <th align="left" valign="top">Total <input type="text" name="total" value="Total" class="search_init" /></th>
            <th align="left" valign="top">&nbsp;<input type="hidden" name="status" value="status" class="search_init" /></th>
            <th align="left" valign="top">&nbsp;<input type="hidden" name="emptyrow" value="" class="search_init" /></th>
        </tr>
    </tfoot>
</table>
</div>

Thanks in Advance,

Taken from datatables documentation:

This initialisation variable allows you to specify exactly where in the DOM you want DataTables to inject the various controls it adds to the page (for example you might want the pagination controls at the top of the table). DIV elements (with or without a custom class) can also be added to aid styling. The follow syntax is used:
The following options are allowed:

'l' - Length changing
'f' - Filtering input
't' - The table!
'i' - Information
'p' - Pagination
'r' - pRocessing
The following constants are allowed:
'H' - jQueryUI theme "header" classes ('fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix')
'F' - jQueryUI theme "footer" classes ('fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix')
The following syntax is expected:
'<' and '>' - div elements
'<"class" and '>' - div with a class
'<"#id" and '>' - div with an ID
Examples:
'<"wrapper"flipt>', '<lf<t>ip>'

What you are interested in is the 'f' (filtering). So if you want it in the header (or above the table) you should put it befare the 't';

For example if you use jquery UI you could do:

 "sDom": '<"H"lf>t<"F"ip>', 

This means in the header class put the lenght changing and the filter , then print the table, tha put the info and paginagtion with the footer class. If you post your code i can help you even more.

EDIT - ok you are using custom filters. You should remove this:

  <tfoot>
        <tr>
            <th align="left" valign="top">Invoice No <input type="text" name="invoice_no" value="Invoice No" class="search_init" /></th>
            <th align="left" valign="top">Order Date <input type="text" name="order_date" value="Order Date" class="search_init" /></th>
            <th align="left" valign="top">Company <input type="text" name="company" value="Company" class="search_init" /></th>
            <th align="left" valign="top">Promo <input type="text" name="promo" value="Promo" class="search_init" /></th>
            <th align="left" valign="top">Terms <input type="text" name="terms" value="Terms" class="search_init" /></th>
            <th align="left" valign="top">Total <input type="text" name="total" value="Total" class="search_init" /></th>
            <th align="left" valign="top">&nbsp;<input type="hidden" name="status" value="status" class="search_init" /></th>
            <th align="left" valign="top">&nbsp;<input type="hidden" name="emptyrow" value="" class="search_init" /></th>
        </tr>
    </tfoot>

and add the filters before the thead row like this:

 <thead>
                <tr>
            <th align="left" valign="top">Invoice No <input type="text" name="invoice_no" value="Invoice No" class="search_init" /></th>
            <th align="left" valign="top">Order Date <input type="text" name="order_date" value="Order Date" class="search_init" /></th>
            <th align="left" valign="top">Company <input type="text" name="company" value="Company" class="search_init" /></th>
            <th align="left" valign="top">Promo <input type="text" name="promo" value="Promo" class="search_init" /></th>
            <th align="left" valign="top">Terms <input type="text" name="terms" value="Terms" class="search_init" /></th>
            <th align="left" valign="top">Total <input type="text" name="total" value="Total" class="search_init" /></th>
            <th align="left" valign="top">&nbsp;<input type="hidden" name="status" value="status" class="search_init" /></th>
            <th align="left" valign="top">&nbsp;<input type="hidden" name="emptyrow" value="" class="search_init" /></th>
        </tr>
        <tr>
            <th align="left" width="60">Invoice</th>
            <th align="left" width="75">Order Date</th>
            <th align="left" width="230">Company</th>
            <th align="left" width="60">Promo</th>
            <th align="left" width="40">Terms</th>
            <th align="left" width="50">Total</th>
            <th align="left" width="70">Status</th>
            <th align="left" width="70"></th>
        </tr>
    </thead>

And you should be ok