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>