如何在jQuery Datatables中更改Individual列过滤的位置

时间：2011-07-11 14:18:23

标签： jquery dom positioning datatables

我已经在我的应用程序中集成了jQuery Datatable。我正在使用单独的列过滤（使用“输入”元素）。它来了

  

TFOOT

HTML标签。所以从逻辑上讲，它就在桌面上。现在我想要的是改变它的位置。我希望它高于

  

THEAD

html的标签。任何人都可以指导我如何更改单个列过滤器的位置。虽然他们告诉我们使用DOM位置，但我无法得到我们究竟能做到这一点的逻辑。

Javascript代码

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代码，

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

先谢谢，

1 个答案:

答案 0 :(得分：2)

取自datatables文档：

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>'

你感兴趣的是'f'（过滤）。因此，如果你想在标题中（或在表格上方），你应该把它放在't';

例如，如果你使用jquery UI，你可以这样做：

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

这意味着在头类中放置长度更改和过滤器，然后打印表，将信息和paginagtion与页脚类放在一起。如果您发布代码，我可以为您提供更多帮助。

编辑 - 确定您使用的是自定义过滤器。你应该删除它：

  <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>

并在thead行之前添加过滤器，如下所示：

 <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>

你应该没问题

相关问题
最新问题