Last row in table does not lock 1st column
Last row in table does not lock 1st column
bbrindza
Posts: 316Questions: 73Answers: 1
in FixedColumns
I am using fixedColumns to lock the first column of my table. It works on all rows except the last row. The column does not lock.
Any thoughts. Here is the HTML & JS
<!DOCTYPE html>
<html>
<head>
<title>Hourly Salary Increase Approval</title>
<link rel="stylesheet" type="text/css" href="/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="/css/fixedColumns.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="/DataTables_Editor/css/editor.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="/css/rowGroup.dataTables.min.css">
<script type="text/javascript" src="/js/jquery-current.min.js"></script>
<script type="text/javascript" src="/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/js/dataTables.fixedColumns.min.js"></script>
<script type="text/javascript" src="/js/dataTables.select.min.js"></script>
<script type="text/javascript" src="/DataTables_Editor/js/dataTables.editor.min.js"></script>
<script type="text/javascript" src="/js/dataTables.rowGroup.min.js"></script>
<script type="text/javascript">
var editor;
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
ajax: "ssp_xxxxxxxx.php",
table: "#approvalTable",
fields: [{label: "Percent of Increase",
name: "XXXXWPER",
attr: {maxlength:4,
style:"height:20px; width:50px",}
},
{label: "Review Score",
name: "XXXXWREV",
attr: {maxlength:3,
style:"height:20px; width:30px",}
},
]
} );
var table = $('#approvalTable').DataTable( {
fixedColumns: {
leftColumns: 6
},
scrollX: true,
ajax: "ssp_xxxxxx.php",
order: [[1, 'asc']],
columns: [
{ data: "numeric_month", "visible": false },
{ data: "XXXXLOC", "visible": false },
{ data: "XXXXLOCD", "visible": false },
{ data: "XXXXEMPN" },
{ data: "XXXXFNAM" },
{ data: "XXXXLNAM" },
{ data: "XXXXDNAM" },
{ data: "XXXXTITL" },
{ data: "XXXXJBGD" },
{ data: "XXXXYREG" },
{ data: "XXXXWNEW" },
{ data: "XXXXWAMT" },
{ data: "XXXXWPER", className: 'editable' },
{ data: "XXXXWREV", className: 'editable' },
{ data: "XXXXDLIN" },
{ data: "XXXXSEDT" },
{ data: "XXXXMIN" },
{ data: "XXXXMID" },
{ data: "XXXXMAX" },
{ data: "XXXXWCOM" },
],
} );
$( table.table().container() ).on( 'click', 'tbody td:not(:first-child)', function (e) {
editor.inline( this );
} );
} );//END $(document).ready(function()
</script>
</head>
<body>
<h3>Hourly Salary Increase Approval</h3>
<table id="approvalTable" class="display nowrap" width="100%" cellspacing="0">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th>Emp #</th>
<th>Last Name</th>
<th>First Name</th>
<th>Department</th>
<th>Job Title</th>
<th>Job Grade</th>
<th>Hourly Rate</th>
<th>New Hourly Rate</th>
<th>$ Increase</th>
<th>% Increase</th>
<th>Review Score</th>
<th>Last Increase</th>
<th>Effective Date</th>
<th>Min</th>
<th>Mid</th>
<th>Max</th>
<th>Comments</th>
</tr>
</thead>
</table>
</body>
</html>
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Let me correct the number of column I intend to lock. It is the first 6, which the first 3 are not visible not the first column like I stated earlier.
I don't see anything strange in your code except you are loading rowGroup code but not using it. This example with multiple fixed columns works:
https://datatables.net/extensions/fixedcolumns/examples/initialisation/two_columns.html
Can you provide a link to your page or a test case showing the issue?
Kevin
If you don't need those first three columns to be visible - simply don't include them in either the HTML or the
columnsarray. They will still be in the row's data object if you need them later.But, aside from that, as Kevin says, we'd need a test case showing the issue.
Allan
Let me work on the suggestion Allan made. If this works I will let you know or I will provide a test case.
Bob
I removed the hidden columns as well as any JS and CSS for RowGroup and still the same issue. I cannot provide a link to the page, however I can email you the 2 scripts as well as sample JSON data. Once we resolve the issue we can publish the fix on the forum if needed
I found the cause but not sure why this is happening.
In the fixColumn link the example Kevin provided, the jQuery version used is 1.12.4.
I am use the latest version of jQuery 3.2.1 .
When I change my jQuery script to use 1.12.4 it works.
I would much rather use the latest version if at all possible.
Does this example show what you are seeing: http://live.datatables.net/tudinade/1/edit ? With jQuery 3.2.1 I'm seeing the fixed column being truncated. It looks like it is missing the scrollbar spacing.
Allan
No Allan, I have not seen this. What I am seeing is that the last row in the table does not lock the columns fixed when the the horizontal scroll is moved. This is also compounded when the "Show entries" drop-down selection is used in used.
Before Scrolling
After Scrolling
I'm reasonably sure that is actually the same issue. The height of the fixed column container is being cut short for some reason. I'll post back once I've had a chance to look into and debug that.
Allan
Could you try this version of FixedColumns please? I believe that should address the problem.
Allan
I tried the GitHub version you provided... still the same problem. Are you testing with the latest jQuery v3.2.1?
Allan,
A bit of new information When I added a rightColumns: 3, the fixedColumns on the left behave as intended .
Yes, I was using jQuery 3.2.1. I've updated my example from above to use the new version of FixedColumns here: http://live.datatables.net/tudinade/2/edit . It shows the issue that was shown before has been addressed.
Can you modify that example or create a new example demonstrating the issue you are seeing so I can debug and fix it please?
Thanks,
Allan
That worked Allan . Good work Thank you.