Issue in datatable multiple fixed headers
Issue in datatable multiple fixed headers
Uvindu
Posts: 2Questions: 1Answers: 0
Code
<div class="row">
<table id="myTable" class="table table-striped display">
<thead>
<tr>
<th class="no-hide">Customer Number</th>
<th class="no-hide">Name</th>
<th>ID Number</th>
<th>ID Type</th>
<th>ID Date of Issue</th>
<th>Mobile</th>
<th>Whatsapp</th>
<th>Landphone</th>
<th>Work Phone</th>
<th>Email</th>
<th>Fax</th>
<th>Residential Address 1</th>
<th>Residential Address 2</th>
<th>Residential Address 3</th>
<th>Residential Postal Code</th>
<th>Residential State</th>
<th>Residential Country</th>
<th>Postal Address 1</th>
<th>Postal Address 2</th>
<th>Postal Address 3</th>
<th>Postal Postal Code</th>
<th>Postal State</th>
<th>Postal Country</th>
<th>Other Address 1</th>
<th>Other Address 2</th>
<th>Other Address 3</th>
<th>Other Postal Code</th>
<th>Other State</th>
<th>Other Country</th>
<th>Occupation</th>
<th>Employer</th>
<th>Employer Address</th>
<th>Employer Phone</th>
<th>Monthly Income</th>
<th>Income Source</th>
<th>Monthly Expenses</th>
<th>Spouse</th>
<th>Spouse Employer</th>
<th>Spouse Designation</th>
<th>Spouse Income</th>
<th>Dependants</th>
<th>Movable Property</th>
<th>Immovable Property</th>
<th>Created By</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
</table>
</div>
var table = $('#myTable').DataTable({
processing: true,
serverSide: true,
fixedHeader: true,
fixedColumns: {
start: 2,
},
scrollCollapse: true,
scrollX: true,
searching: false,
autoUpdateInput: false,
paging: true,
pageLength: pageLength,
layout: {
topStart: {
buttons: {
buttons: [
{
extend: 'csvHtml5',
text: 'Export CSV',
// title: 'Gorentally Data export Customer List '+ new Date().toISOString().slice(0, 10),
// exportOptions: { columns: [0, 1, 2, 3] },
action: function (e, dt, node, conf) {
let search = currentSearch || '';
window.location.href = "<?= base_url('route') ?>?search=" + search;
//window.location.href = "<?= base_url('route') ?>";
$(node).removeClass('processing');
},
},
{
extend: 'excelHtml5',
text: 'Export Excel',
// title: 'Gorentally Data export Customer List '+ new Date().toISOString().slice(0, 10),
// exportOptions: { columns: [0, 1, 2, 3] },
action: function (e, dt, node, conf) {
let search = currentSearch || '';
window.location.href = "<?= base_url('route') ?>?search=" + search;
// window.location.href = "<?= base_url('route') ?>";
$(node).removeClass('processing');
},
},
{
extend: 'colvis',
text: 'Column visibility',
columns: ':not(.no-hide)',
}
],
},
},
},
ajax: {
url: "<?= base_url('route') ?>",
type: "POST",
data: function(d) {
d.search_string = currentSearch; // search is added
}
},
order: [[5, 'asc'],[0, 'asc']],
orderMulti: false,
columnDefs: [
{ targets: '_all', orderSequence: ['asc', 'desc'] },
{ targets: [6], className: 'dt-center' },
{ targets: 43, orderable: false },
{ targets: 45, orderable: false },
],
columns: [
{
data: 'id',
render: function(data, type, row) {
return `<a href="${route}" title="View">${data}</a>`;
}
},
{ data: 'name' },
{ data: 'id_number' },
{ data: 'id_type' },
{ data: 'id_doi' },
{ data: 'mobile' },
{data: 'whatsapp'},
{data: 'landphone'},
{data: 'workphone'},
{data: 'email'},
{data: 'fax'},
{data: 'resaddress1'},
{data: 'rresaddress2'},
{data: 'resaddress3'},
{data: 'rrespostal_code'},
{ data: 'rresstate' },
{ data: 'rrescountry' },
{data: 'address1'},
{data: 'address2'},
{data: 'address3'},
{data: 'postal_code'},
{ data: 'state' },
{ data: 'country' },
{data: 'othaddress1'},
{data: 'othaddress2'},
{data: 'othaddress3'},
{data: 'othpostal_code'},
{data: 'othstate' },
{data: 'othcountry' },
{data: 'occupation'},
{data: 'employer'},
{data: 'employer_address'},
{data: 'employer_phone'},
{data: 'monthly_income' },
{data: 'income_source' },
{data: 'monthly_expence' },
{data: 'spouse_name'},
{data: 'spouse_employer'},
{data: 'spouse_designation'},
{data: 'spouse_income'},
{data: 'dependent' },
{data: 'moveable_property' },
{data: 'imovable_property' },
{ data: 'created_by' },
{ data: 'status' },
{
data: 'actions',
}
],
createdRow: function(row, data, dataIndex) {
const status = data.status;
if(status === 'DELETED'){
$(row).addClass('bg-red-50');
}
}
});
Description of problem: 
Can you help me with this issue in datatable multiple fixed headers. when scrolling the headers of fixed headers are hidden/covered. i want to make it as normal way(the non fixed columns hiding from the back of the fixed columns when scrolling) in the datatable.
Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
This question has an accepted answers - jump to answer
Answers
Can you link to a test case showing the issue please? Sounds like it might be a z-index issue or something, I'm not sure. I'd need a test case to be able to debug, particularly as the examples work as expected.
Allan
Thanks a lot. @allan the issue was the z-index. and i fixed it.
Awesome - thanks for letting me know.
Allan