So ändern Sie die position von Einzelnen Spalten filtern in jQuery Datatables

Habe ich integriert die jQuery Datatable in meine Anwendung. und ich bin mit Individuellen filtern von Spalten (mit "input" - Elemente). Es kommt in

tfoot

- tag von HTML. So logisch es geht nach unten der Tabelle. Nun, was ich will, ist zu ändern Sie die position es ist. Ich will es kommt vor das

thead

- tag des html. Kann jemand mich leiten, wie kann ich das ändern das die Position von einzelnen Spalten filtern. Wenn Sie uns sagen, verwenden Sie DOM-position, aber ich bin nicht in der Lage zu bekommen, dass die Logik, wie genau wir das tun können.

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>
            <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');?>"  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');?>"  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>

Vielen Dank im Voraus,

InformationsquelleAutor Mohsin Rafique | 2011-07-11