I'm using DataTables 1.10.4 and Bootstrap 3 with TableTools, FixedColumn and Scroller extensions, and am experiencing some odd rendering bugs.
Screenshot: http://i.imgur.com/e0PjhQF.png
Firstly I'm getting a second header row within the table. It is not fixed in place, and scrolls away when scrolling the table inside the window. This can be seen in all browsers I've used so far (Chrome, Firefox, IE 11 and iOS Safari). This seems to be related to having the "sScrollX" option enabled in the initialisation code for the table, but I believe this is also necessary for the Scroller extension to work.
Secondly, within both the header rows I am seeing duplicate ascend/descend sort toggles. No idea what is causing this other than perhaps for a CSS clash somewhere, though I've not experienced it on any of my other datatables. Again this can be seen in all browsers I've tried.
Lastly (this bug shows up in all browsers I've tested so far, except Chrome), there is an additional horizontal scrollbar displaying at the bottom of the first column (which I have set to be stationary in FixedColumns) of the table. This seems to be due to the first column not rendering quite wide enough as it can only be scrolled a tiny bit left or right. Initially I thought this might be due to setting the text in the first column to have a font-weight of bold, but removing this did not fix the issue.
Unfortunately the code runs on our intranet server and as such I cannot post a link to the page.
<div class="col-lg-12 col-md-12 col-sm-12">
<table class="table table-bordered" id="dataTables-studentlist">
<thead>
<tr class='tableHeaderRed'>
<th style="color:white">Name</th>
<th style="color:white">Cohort</th>
<th style="color:white">First Reg Date</th>
<th style="color:white">Next Reg Date</th>
<th style="color:white">Course Part</th>
<th style="color:white">Status</th>
<th style="color:white">Def. Reason</th>
<th style="color:white">Int. Date</th>
<th style="color:white">Surname</th>
<th style="color:white">Forename</th>
<th style="color:white">Anon. No</th>
<th style="color:white">HESA ID</th>
<th style="color:white">Course Path</th>
<th style="color:white">Exit Year</th>
<th style="color:white">NTN</th>
<th style="color:white">Nationality</th>
<th style="color:white">Int. Fee Status</th>
<th style="color:white">Fee Notes</th>
<th style="color:white">Deanery</th>
<th style="color:white">Hospital</th>
<th style="color:white">Educational Supervisor</th>
<th style="color:white">Educational Supervisor Email</th>
<th style="color:white">Address 1</th>
<th style="color:white">Address 2</th>
<th style="color:white">Address 3</th>
<th style="color:white">Address 4</th>
<th style="color:white">PostCode</th>
<th style="color:white">Home Phone</th>
<th style="color:white">Work Phone</th>
<th style="color:white">Mobile</th>
<th style="color:white">Email 1</th>
<th style="color:white">Email 2</th>
<th style="color:white">Email ICR</th>
<th style="color:white">StudentID</th>
</tr>
</thead>
</table>
</div>
$(document).ready(function () {
studentListTable = $('#dataTables-studentlist').dataTable({
"ajax": {
url: "includes/StudentList.php?cohortID=" + cohortFilter + "&coursePartID=" + coursePartFilter +
"&statusID=" + statusFilter + "&coursePathID=" + coursePathFilter + "&feeStatusID=" + feeStatusFilter + "&courseID=" + selectedCourseID,
type: 'POST'
},
processing: "true",
"dom": "firtTS",
"sScrollX": "100%",
"sScrollXInner": "400%",
scrollY: tableHeight,
"columns": [
{className: "BoldColumn", data: "StudentView.StudentID1"},
{data: "StudentView.Cohort"},
{data: "StudentView.FirstRegistrationDate"},
{data: "StudentView.NextRegistrationDate"},
{data: "StudentView.PartName"},
{data: "StudentView.StudentStatus"},
{data: "StudentView.DeferralReason"},
{data: "StudentView.InteruptionDate"},
{data: "StudentView.Surname"},
{data: "StudentView.Forename"},
{data: "StudentView.AnonymousID"},
{data: "StudentView.HESAStudentID"},
{data: "StudentView.PathName"},
{data: "StudentView.ExitYear"},
{data: "StudentView.NTN"},
{data: "StudentView.Nationality"},
{data: "StudentView.IFS"},
{data: "StudentView.FeeNotes"},
{data: "StudentView.StudentDeanery"},
{data: "StudentView.StudentHospital"},
{data: "StudentView.EducationalSupervisor"},
{data: "StudentView.EducationalSupervisorEmail"},
{data: "StudentView.Address1"},
{data: "StudentView.Address2"},
{data: "StudentView.Address3"},
{data: "StudentView.Address4"},
{data: "StudentView.PostCode"},
{data: "StudentView.HomePhone"},
{data: "StudentView.WorkPhone"},
{data: "StudentView.Mobile"},
{data: "StudentView.Email1"},
{data: "StudentView.Email2"},
{data: "StudentView.InternalEmail"},
{data: "StudentView.StudentID"}
],
"tableTools": {
sRowSelect: 'os',
aButtons: [
"xls"
]
}
});
new $.fn.dataTable.FixedColumns(studentListTable, {
leftColumns: 1
});
});
Grateful for any help on this, the extensions work nicely otherwise!