Fixedcolumns - Columns do not line up when adding a footer
Fixedcolumns - Columns do not line up when adding a footer
smelcher53
Posts: 3Questions: 1Answers: 0
When I try to use the Fixedcolumns extension, my columns do not line up if I am using a footer on the table.
My fiddle (http://jsfiddle.net/smelcher/3fgLdr40/9/) tried to show whats broken but unfortunately it actually works in fiddle.
My actual code that breaks is below. You should be able to copy this out and reproduce the problem.
Thanks for taking a look at this.
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript">
</script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js" type="text/javascript">
</script>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.0/js/dataTables.fixedColumns.min.js" type=
"text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#myid').DataTable({'dom':'t','paging': false, 'scrollCollapse': true,'scrollX':true,
'orderClasses': false, 'bSort': true, 'autoWidth':false ,'scrollY':'80', 'aaSorting': [],fixedColumns: {
leftColumns: 3
}});
} );
</script>
</head>
<body>
<table class="dataTable" id="myid" border="1">
<thead>
<tr>
<th>Col1c</th>
<th>Col2</th>
<th>Column 3333</th>
<th>QQQ</th>
<th>All123456</th>
<th>Testt6 Testt</th>
<th>Past 123 123456</th>
<th>12345678 Sunday</th>
<th>12345678 vs SS Sunday</th>
<th>$ 123456</th>
<th>$ vs SS Sunday</th>
<th>12345678 1/10/2016</th>
<th>12345678 vs SS 1/10/2016</th>
<th>$ 1/10/2016</th>
<th>$ vs SS 1/10/2016</th>
<th>12345678 1/17/2016</th>
<th>12345678 vs SS 1/17/2016</th>
<th>$ 1/17/2016</th>
<th>$ vs SS 1/17/2016</th>
<th>12345678 1/24/2016</th>
<th>12345678 vs SS 1/24/2016</th>
<th>$ 1/24/2016</th>
<th>$ vs SS 1/24/2016</th>
<th>12345678 1/31/2016</th>
<th>12345678 vs SS 1/31/2016</th>
<th>$ 1/31/2016</th>
<th>$ vs SS 1/31/2016</th>
<th>12345678 2/7/2016</th>
<th>12345678 vs SS 2/7/2016</th>
<th>$ 2/7/2016</th>
<th>$ vs SS 2/7/2016</th>
<th>12345678 2/14/2016</th>
<th>12345678 vs SS 2/14/2016</th>
<th>$ 2/14/2016</th>
<th>$ vs SS 2/14/2016</th>
<th>12345678 2/21/2016</th>
<th>12345678 vs SS 2/21/2016</th>
<th>$ 2/21/2016</th>
<th>$ vs SS 2/21/2016</th>
<th>12345678 2/28/2016</th>
<th>12345678 vs SS 2/28/2016</th>
<th>$ 2/28/2016</th>
<th>$ vs SS 2/28/2016</th>
<th>12345678 3/6/2016</th>
<th>12345678 vs SS 3/6/2016</th>
<th>$ 3/6/2016</th>
<th>$ vs SS 3/6/2016</th>
<th>12345678 3/13/2016</th>
<th>12345678 vs SS 3/13/2016</th>
<th>$ 3/13/2016</th>
<th>$ vs SS 3/13/2016</th>
</tr>
</thead>
<tfoot>
<tr >
<td ></td>
<td ></td>
<td ></td>
<td ></td>
<td ></td>
<td ></td>
<td ></td>
<td>818,946.00</td>
<td>818,946.00</td>
<td>$1,905,869.00</td>
<td>$1,905,869.00</td>
<td>818,946.00</td>
<td>818,946.00</td>
<td>$1,905,869.00</td>
<td>$1,905,869.00</td>
<td>818,946.00</td>
<td>818,946.00</td>
<td>$1,905,869.00</td>
<td>$1,905,869.00</td>
<td>818,946.00</td>
<td>818,946.00</td>
<td>$1,905,869.00</td>
<td>$1,905,869.00</td>
<td>818,946.00</td>
<td>818,946.00</td>
<td>$1,905,869.00</td>
<td>$1,905,869.00</td>
<td>818,946.00</td>
<td>818,946.00</td>
<td>$1,905,869.00</td>
<td>$1,905,869.00</td>
<td>818,946.00</td>
<td>818,946.00</td>
<td>$1,905,869.00</td>
<td>$1,905,869.00</td>
<td>818,946.00</td>
<td>818,946.00</td>
<td>$1,905,869.00</td>
<td>$1,905,869.00</td>
<td>818,946.00</td>
<td>818,946.00</td>
<td>$1,905,869.00</td>
<td>$1,905,869.00</td>
<td>818,946.00</td>
<td>818,946.00</td>
<td>$1,905,869.00</td>
<td>$1,905,869.00</td>
<td>818,946.00</td>
<td>818,946.00</td>
<td>$1,905,869.00</td>
<td>$1,905,869.00</td>
</tr>
</tfoot>
<tbody>
<tr >
<td>XXXXX</td>
<td>BB000</td>
<td>10 DK QAZWSX QAZWS - QAZWS</td>
<td>69,145.00</td>
<td>0.00</td>
<td>0.00</td>
<td>33,714.00</td>
<td>102,859.00</td>
<td>102,859.00</td>
<td>$242,119.39</td>
<td>$242,119.39</td>
<td>102,859.00</td>
<td>102,859.00</td>
<td>$242,119.39</td>
<td>$242,119.39</td>
<td>102,859.00</td>
<td>102,859.00</td>
<td>$242,119.39</td>
<td>$242,119.39</td>
<td>102,859.00</td>
<td>102,859.00</td>
<td>$242,119.39</td>
<td>$242,119.39</td>
<td>102,859.00</td>
<td>102,859.00</td>
<td>$242,119.39</td>
<td>$242,119.39</td>
<td>102,859.00</td>
<td>102,859.00</td>
<td>$242,119.39</td>
<td>$242,119.39</td>
<td>102,859.00</td>
<td>102,859.00</td>
<td>$242,119.39</td>
<td>$242,119.39</td>
<td>102,859.00</td>
<td>102,859.00</td>
<td>$242,119.39</td>
<td>$242,119.39</td>
<td>102,859.00</td>
<td>102,859.00</td>
<td>$242,119.39</td>
<td>$242,119.39</td>
<td>102,859.00</td>
<td>102,859.00</td>
<td>$242,119.39</td>
<td>$242,119.39</td>
<td>102,859.00</td>
<td>102,859.00</td>
<td>$242,119.39</td>
<td>$242,119.39</td>
</tr>
</tbody>
</table>
</body>
</html>
This discussion has been closed.
Answers
Thanks for posting the code - there is absolutely a problem there. I'm afraid I'm not immediately sure what. I'll need to dig into it and it may take some time. It might be a bit of time before I can look at it in detail I'm afraid. I'll post back here when done.
Allan
Ok, thanks for taking a look. If there is anything else I can do to help let me know.
FYI - I also sent a private message through the forum.
I fiddled with the fiddle and it looks like ti is not completely correct in fiddle either. I added borders to the table to show the issue.
http://jsfiddle.net/smelcher/3fgLdr40/10/
Following up on this - the issue was related to the content in the footer and how DataTables was handling it (or not). This commit addresses that and the test case is updated.
Allan