当前位置： 文江博客话题详情

如何更改 jQuery 数据表中单个列过滤的位置

发布于 2024-11-19 23:25:12 字数 7802 浏览 9 评论 0原文

我已将 jQuery 数据表集成到我的应用程序中。我正在使用单独的列过滤（使用“输入”元素）。它进来了

脚

标签。所以从逻辑上讲，它会被排除在外。现在我想要的是改变它的位置。我希望它高于

头部

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>

提前致谢，

原文

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>
            <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"> <input type="hidden" name="status" value="status" class="search_init" /></th>
            <th align="left" valign="top"> <input type="hidden" name="emptyrow" value="" class="search_init" /></th>
        </tr>
    </tfoot>
</table>
</div>

Thanks in Advance,

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

恏ㄋ傷疤忘ㄋ疼 2024-11-26 23:25:12

摘自数据表文档：

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

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

编辑 - 好的，您正在使用自定义过滤器。您应该删除此：

  <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"> <input type="hidden" name="status" value="status" class="search_init" /></th>
            <th align="left" valign="top"> <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"> <input type="hidden" name="status" value="status" class="search_init" /></th>
            <th align="left" valign="top"> <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>

您应该没问题

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"> <input type="hidden" name="status" value="status" class="search_init" /></th>
            <th align="left" valign="top"> <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"> <input type="hidden" name="status" value="status" class="search_init" /></th>
            <th align="left" valign="top"> <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

回复 原文
~没有更多了~

关于作者

残花月

暂无简介

文章
评论
469 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

知足的幸福

文章 0 评论 0

我一向站在原地

文章 0 评论 0

慕烟庭风

文章 0 评论 0

秉忠贞之诚 守退让之实

文章 0 评论 0

小兔几

文章 0 评论 0

mb_3y7WUgWY

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文