Fatal编程技术网
  • jquery/
  • Jquery 将Datatable单列搜索页脚移动到页眉

Jquery 将Datatable单列搜索页脚移动到页眉

jquery asp.net datatables

Jquery 将Datatable单列搜索页脚移动到页眉,jquery,asp.net,datatables,Jquery,Asp.net,Datatables,现在我已经让它工作了，所以列搜索作为页脚出现在datatable的底部，搜索功能也工作了。但是，我希望将该页脚行附加到页眉下方，并保留搜索功能。我已经能够将行移动到正确的位置，但当我这样做时，搜索功能中断。我做错了什么 以搜索作为页脚的完整工作脚本： $('#divLoading').show(); $(document).ready(function () { $('#<%=ASPxGridView1.ClientID%> tfoot tr td').e

现在我已经让它工作了，所以列搜索作为页脚出现在datatable的底部，搜索功能也工作了。但是，我希望将该页脚行附加到页眉下方，并保留搜索功能。我已经能够将行移动到正确的位置，但当我这样做时，搜索功能中断。我做错了什么

以搜索作为页脚的完整工作脚本：

    $('#divLoading').show();

    $(document).ready(function () {

    $('#<%=ASPxGridView1.ClientID%> tfoot tr td').each(function () {
            var title = $('#<%=ASPxGridView1.ClientID%> thead th').eq($(this).index()).text();
        $(this).html('<input type="text" placeholder="Search ' + title + '" />');
        });

        var dtable = $('#<%=ASPxGridView1.ClientID%>').DataTable({
            colReorder: true, stateSave: true, orderCellsTop: true,
            dom: 'Bfrtilp',
            buttons: [
                {
                    extend: 'colvis',

                },
                {
                    extend: 'csv',
                    text: 'Export',
                    title: 'Applications',
                    exportOptions: {
                        columns: ':visible',                                                                        
                        columns: ':not(:first-child)'
                    }
                }
            ],
            columnDefs: [
                {
                    targets: [7, 8, 9, 10],
                    visible: false
                },
                //{
                //    targets: 0,
                //    orderable: false
                //}
            ],
            "lengthMenu": [[5,100, 500, -1], [5,100, 500, "All"]],
            "scrollX": true

        });

        dtable.columns().every(function () {
            var that = this;

            $('input', this.footer()).on('keyup change', function () {
                if (that.search() !== this.value) {
                    that
                        .search(this.value)
                        .draw();
                }
            });
        });
    $('#divGrid').show();
    $('#divLoading').hide();


    dtable.columns.adjust().draw();

        $('#<%=txtSearch.ClientID%>').focusTextToEnd();
        $('#<%=txtSearch.ClientID%>').keypress(function (e) { if (e.which == 13) { e.preventDefault(); $('#<%=btnSearch.ClientID%>').click(); return false; } });

        $(".buttons-colvis").click(function () {
            if ($(".dt-button-collection").height() > 350) {
                $(".dt-button-collection").css("height", "350px");
                $(".dt-button-collection").css("overflow-y", "visible");
            }
        });
        });

$（'#divload'）.show（）；
$（文档）.ready（函数（）{
$（'#tfoot tr td'）。每个（函数（）{
var title=$（'#thead th'）.eq（$（this.index（））.text（）；
$（this.html（“”）；
});
var dtable=$（'#'）。数据表({
colReorder:true，stateSave:true，orderCellsTop:true，
dom:'Bfrtilp'，
按钮：[
{
扩展：“colvis”，
},
{
扩展：“csv”，
文本：“导出”，
标题:"申请",，
出口选择：{
列：'：可见'，
列：':not（：第一个子项）'
}
}
],
columnDefs：[
{
目标：[7,8,9,10]，
可见：假
},
//{
//目标：0，
//可订购：false
//}
],
“长度菜单”：[[5100500，-1]，[5100500，“全部”]，
“scrollX”：正确
});
dtable.columns（）.every（函数（）{
var=这个；
$（'input'，this.footer（））.on（'keyup change'，function（）{
if（that.search（）！==此.value）{
那个
.search（此.value）
.draw（）；
}
});
});
$（'#divGrid'）.show（）；
$（'#divload'）.hide（）；
dtable.columns.adjust（）.draw（）；
$（'#'）。focusTextToEnd（）；
$（'#'）.keypress（函数（e）{if（e.which==13）{e.preventDefault（）；$（'#'）.click（）；return false；}}）；
$（“.buttons colvis”）。单击（函数（）{
如果（$（“.dt按钮集合”）.height（）>350）{
$（“.dt按钮集合”）.css（“高度”，“350px”）；
$（“.dt按钮集合”）.css（“溢出-y”，“可见”）；
}
});
});
我曾尝试在“$（'#tfoot tr td'）下面添加一行。each（function（）{）”会将行追加到标题行下面，但它会中断搜索并显示“未找到匹配的记录”。我不确定是否只是将其放在了错误的位置

新增行：

$('#<%=ASPxGridView1.ClientID%> tfoot tr').appendTo('#<%=ASPxGridView1.ClientID%> thead');

$（'tfoot tr'）。附录（'thead'）；
实现这一点没有直接的方法

但是你可以试试下面的方法

HTML

<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <thead>
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
        </tbody>
</table>


名称
位置
办公室
年龄
开始日期
薪水
老虎尼克松
系统架构师
爱丁堡
61
2011/04/25
$320,800
加勒特温特斯
会计
东京
63
2011/07/25
$170,750
阿什顿考克斯
初级技术作者
旧金山
66
2009/01/12
$86,000
JS

$(document).ready(function() {
    $($('#example thead')[1]).find('th').each( function () {
        var title = $(this).text();
        $(this).append( '<input type="text" placeholder="Search '+title+'" />' );
    } );

    // DataTable
    var table = $('#example').DataTable();

    // Apply the search
    table.columns().every( function () {
        var that = this;


        $($( '#example input')[that[0][0]]).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        });

    } );

})

$（文档）.ready（函数（）{
$（$（'#示例thead'）[1]）。查找（'th'）。每个（函数（）{
var title=$（this.text（）；
$（此）。附加（“”）；
} );
//数据表
变量表=$（“#示例”）.DataTable（）；
//应用搜索
table.columns（）.every（函数（）{
var=这个；
$（$（'#示例输入'）[that[0][0]]）。打开（'keyup change'，函数（）{
如果（that.search（）！==this.value）{
那个
.search（this.value）
.draw（）；
}
});
} );
})
您只能通过使用css位置相对和abosolute来实现这一点

请尝试下面的代码，我希望这将帮助你

$（文档）.ready（函数（）{
//设置-向每个页脚单元格添加文本输入
$（'#示例tfoot th'）。每个（函数（）{
var title=$（this.text（）；
$（this.html（“”）；
} );
//数据表
变量表=$（'#示例'）。数据表({
“分页”：false，
“信息”：错误，
“卷轴”：200，
“scrollX”：正确
});
//应用搜索
table.columns（）.every（函数（）{
var=这个；
$（'input'，this.footer（））.on（'keyup change'，函数（）{
如果（that.search（）！==this.value）{
那个
.search（this.value）
.draw（）；
}
} );
} );
}）；

正文{边框：0}
.dataTables_滚动{位置：相对}
.dataTables_滚动头{页边距底部：40px；}
.dataTables_scrollFoot{位置：绝对；顶部：38px}


名字
姓
位置
办公室
年龄
开始日期
薪水
Extn。
电子邮件
名字
姓
位置
办公室
年龄
开始日期
薪水
Extn。
电子邮件
老虎
尼克松
系统架构师
爱丁堡
61
2011/04/25
$320,800
5421
Tnixon@datatables.net
加勒特
冬天
会计
东京
63
2011/07/25
$170,750
8422
Gwinters@datatables.net
阿什顿
考克斯
初级技术作者
旧金山
66