Javascript 数据表的表头未与表体垂直滚动
我补充说 在我的html页面中，如果我添加了更多重叠的列，就可以使用滚动条功能 窗口页面的其他内容或只是表体移动而不移动 标题。正如在其他帖子中提到的，我没有在文章中包含FixedHeader 收到html/js/css文件时，我无法添加测试页 来自web服务的数据，下面是我的代码。 注意：我在标题中添加了Yadcf列过滤器Javascript 数据表的表头未与表体垂直滚动,javascript,html,css,datatables,yadcf,Javascript,Html,Css,Datatables,Yadcf,我补充说 在我的html页面中，如果我添加了更多重叠的列，就可以使用滚动条功能 窗口页面的其他内容或只是表体移动而不移动 标题。正如在其他帖子中提到的，我没有在文章中包含FixedHeader 收到html/js/css文件时，我无法添加测试页 来自web服务的数据，下面是我的代码。 注意：我在标题中添加了Yadcf列过滤器 票证数据 搜寻 $（文档）.ready（函数（）{ var realPath=$（“#根”）和#46；val（）； var webServicePathm=rea
票证数据
搜寻
$（文档）.ready（函数（）{
var realPath=$（“#根”）和#46；val（）；
var webServicePathm=realPath+“/mt/saasreporting/getopenticketsdata？”；
//var project=projectname.innerText；
var parmUrl=“项目=测试项目”；
var webcalurl=webServicePathm+parmUrl；
var表=$（'；#ex1'；）。数据表（{
行重新排序：对，
colReorder：是的，
/*固定标题：{
标题：对，
}, */
“ajax”：{
“url”：WebCalURL，
“dataSrc”：函数（json）{
for（var i=0，ien=json.length；iien；i++）{
json[i][0]='；a href=“/message/'；+json[i][0]+'；查看消息/a'；；
}
返回json；
}
},
“栏目”：[
{“数据”：“客户”，“名称”：“客户”，“标题”：“客户”}，
{“数据”：“项目”、“名称”：“项目”、“标题”：“项目”}，
{“data”：“raisedOn”，“name”：“raisedOn”，“title”：“raisedOn”}，
{“数据”：“ticketId”，“名称”：“ticketId”，“标题”：“ticketId”}，
{“数据”：“assignedTo”，“名称”：“assignedTo”，“标题”：“assignedTo”}，
{“数据”：“优先级”，“名称”：“优先级”，“标题”：“优先级”}
],
“pagingType”：“完整编号”，
选择：true，
“sDom”：'；B“清除”Wfrtip'；，
长度菜单：[
[ 10, 12, 50, -1 ],
['；10行'；，'；12行'；，'；50行'；，'；显示所有'；]，
],
“按钮”：[
{
类名：'；b2'；，
扩展：'；页面长度'；，
自动关闭：是的，
/*text:'；i class=“fa-list-ol-3x”aria hidden=“true”style=“color:#81ad30”/i'*/
标题：行数和行数39；
},
{
类名：'；b2'；，
扩展：'；colvis'；，
自动关闭：是的，
/*text:'；i class=“fa-columns-3x”aria hidden=“true”style=“color:#81ad30”/i'*/
标题：列可见性；，
出口选择：{
列：'；：可见'；，
}
}
],
是的，
是的，
对,，
“scrollX”：正确
});
新的$.fn.dataTable.Buttons（表{
按钮：[
{
类名：'；b1'；，
扩展：'；复制HTML5'；，
/*text:'；i class=“fa-files-o”style=“color:green”/i'*/
标题：复印件；，
出口选择：{
修饰语：{
页码：第39页；当前第39页；
}
}
},{
类名：'；b1'；，
扩展：'；卓越HTML5'；，
/*文本：'；i class=“fa-file-excel-o”style=“color:green”/i'*/
标题：Excel&39；，
出口选择：{
列：'；：可见'；，
修饰语：{
页码：第39页；当前第39页；
}
}
},{
类名：'；b1'；，
扩展：'；csvHtml5'；，
/*text:'；i class=“fa-file-word-o”style=“color:green”/i'*/
标题：CSV&39；，
出口选择：{
列：'；：可见'；，
修饰语：{
页码：第39页；当前第39页；
}
}
},
{
类名：'；b1'；，
扩展：'；pdfHtml5'；，
消息：'；票证状态'；，
/*文本：'；i class=“fa-file-pdf-o”style=“color:red”/i'*/
标题：PDF；，
页脚：是的，
出口选择：{
列：'；：可见'；，
修饰语：{
页码：第39页；当前第39页；
}
}
},
{
类名：'；b1'；，
扩展：'；打印'；，
/*文本：'；i class=“fa打印”aria hidden=“true”s
<html>
<head>
<h2 style="color:#2196F3;">Ticket Data</h2>
</head>
<body>
<div class="container">
<div class="row">
</div>
<div class="row">
<div class="col-md-4 col-md-offset-3">
<form action="" class="search-form">
<div class="form-group has-feedback">
<label for="search" class="sr-only">Search</label>
<input type="text" class="form-control" name="search" id="search" placeholder="search" autocomplete="off"/>
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function() {
var realPath =$("#root").val();
var webServicePathm = realPath+"/mt/saasreporting/getopenticketsdata?";
//var project = projectname.innerText;
var parmUrl = "project=test project";
var webCallUrl = webServicePathm+parmUrl;
var Table= $('#ex1').DataTable( {
rowReorder: true,
colReorder: true,
/* fixedHeader: {
header: true,
}, */
"ajax": {
"url":webCallUrl,
"dataSrc": function ( json ) {
for ( var i=0, ien=json.length ; i<ien ; i++ ) {
json[i][0] = '<a href="/message/'+json[i][0]+'>View message</a>';
}
return json;
}
},
"columns": [
{ "data": "client", "name": "client", "title": "client" },
{ "data": "project", "name": "project", "title": "project" },
{ "data": "raisedOn", "name": "raisedOn", "title": "raisedOn" },
{ "data": "ticketId", "name": "ticketId", "title": "ticketId" },
{ "data": "assignedTo", "name": "assignedTo", "title": "assignedTo" },
{ "data": "priority", "name": "priority", "title": "priority" }
],
"pagingType":"full_numbers",
select: true,
"sDom": 'B<"clear">Wfrtip',
lengthMenu: [
[ 10, 12, 50, -1 ],
[ '10 rows', '12 rows', '50 rows', 'Show all' ],
],
"buttons": [
{
className: 'b2',
extend:'pageLength',
autoClose: true,
/* text: '<i class="fa fa-list-ol-3x" aria-hidden="true" style="color:#81ad30"></i>', */
titleAttr: 'no.of rows'
},
{
className: 'b2',
extend: 'colvis',
autoClose: true,
/* text: '<i class="fa fa-columns-3x" aria-hidden="true" style="color:#81ad30"></i>', */
titleAttr: 'Column Visibility',
exportOptions: {
columns: ':visible',
}
}
],
deferRender: true,
scrollY: true,
scrollCollapse: true,
"scrollX": true
});
new $.fn.dataTable.Buttons( Table, {
buttons: [
{
className: 'b1',
extend: 'copyHtml5',
/* text: '<i class="fa fa-files-o" style="color:green"></i>', */
titleAttr: 'Copy',
exportOptions: {
modifier: {
page: 'current'
}
}
},{
className: 'b1',
extend: 'excelHtml5',
/* text: '<i class="fa fa-file-excel-o" style="color:green"></i>', */
titleAttr: 'Excel',
exportOptions: {
columns: ':visible',
modifier: {
page: 'current'
}
}
},{
className: 'b1',
extend: 'csvHtml5',
/* text: '<i class="fa fa-file-word-o" style="color:green"></i>', */
titleAttr: 'CSV',
exportOptions: {
columns: ':visible',
modifier: {
page: 'current'
}
}
},
{
className: 'b1',
extend: 'pdfHtml5',
message:'Tickets Status',
/* text: '<i class="fa fa-file-pdf-o" style="color:red"></i>', */
titleAttr: 'PDF',
footer: true,
exportOptions: {
columns: ':visible',
modifier: {
page: 'current'
}
}
},
{
className: 'b1',
extend: 'print',
/* text: '<i class="fa fa-print" aria-hidden="true" style="color:blue"></i>', */
titleAttr: 'Print',
footer: true,
autoPrint: true,
exportOptions: {
columns: ':visible',
modifier: {
page: 'current'
}
}
}
]
} );
Table.buttons( 1, null ).container().appendTo(
Table.table().container()
);
yadcf.init(Table, [
{
column_number : 0,
filter_type: "multi_select",
select_type: 'select2',
column_data_type: "text",
html_data_type: "text",
filter_default_label: "clients"
},
{
column_number : 1,
filter_type: "multi_select",
select_type: 'select2',
column_data_type: "text",
html_data_type: "text",
filter_default_label: "projects"
},
{
column_number : 2,
filter_type: "multi_select",
select_type: 'select2',
column_data_type: "text",
html_data_type: "text",
filter_default_label: "raisedOn"
},
{
column_number : 3,
filter_type: "multi_select",
select_type: 'select2',
column_data_Type: "text",
html_data_type: "text",
filter_default_label: "ticketId"
},
{
column_number : 4,
filter_type: "multi_select",
select_type: 'select2',
column_data_type: "text",
html_data_type: "text",
filter_default_label: "assignedTo"
} ,
{
column_number : 5,
filter_type: "multi_select",
select_type: 'select2',
column_data_type: "text",
html_data_type: "text",
filter_default_label: "tag"
}
]);
$('#search').on( 'click', function () {
Table.search( this.value ).draw();
} );
function setTableBody() {
$(".table.dataTable").height(
$(".inner-container").height() - $(".table-header").height());
}
$(document).ready(function () {
setTableBody();
$(window).resize(setTableBody);
$(".table-body").scroll(function () {
$(".table-header").offset({
left: 160 - this.scrollLeft
});
});
});
});
</script>
</body>
</html>