Header is not moving along with vertical scroll
Header is not moving along with vertical scroll
prats
Posts: 45Questions: 21Answers: 0
I have added https://cdn.datatables.net/v/dt/jszip-2.5.0/pdfmake-0.1.18/dt-1.10.13/b-1.2.4/b-colvis-1.2.4/b-flash-1.2.4/b-html5-1.2.4/b-print-1.2.4/cr-1.3.2/sc-1.4.2/se-1.2.0/datatables.min.js
in my html page,for scroller feature if i add more columns it overlaps other content of window page or just table body moves without moving header.
As mentioned in other posts i have not included FixedHeader in html/js/css files
I am not able to add test page as I am receiving data from web service,so here is my code...
`<html>
<head>
<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/js/datatable/select2.full.js"></script>
<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/js/datatable/jquery.dataTables.yadcf.js"></script>
<link rel="stylesheet" type="text/css" href="#{facesContext.externalContext.requestContextPath}/js/datatable/datatables.min.css" />
<link rel="stylesheet" type="text/css" href="#{facesContext.externalContext.requestContextPath}/js/datatable/select2.min.css" />
<h2 style="color:#2196F3;">Ticket Data</h2>
```
</head>
<body>
<table id="ex1" class="display cell-border" cellspacing="0" width="100%">
</table>
<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,
"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',
}
}
],
ScrollY: true,
deferRender: true,
scrollCollapse: true,
ScrollX: 300
});
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();
} );
});
</script>
</body>
</html>
`
This discussion has been closed.