Last row in table does not lock 1st column

Last row in table does not lock 1st column

bbrindzabbrindza Posts: 99Questions: 21Answers: 1

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

Answers

  • bbrindzabbrindza Posts: 99Questions: 21Answers: 1

    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.

  • kthorngrenkthorngren Posts: 5,909Questions: 19Answers: 1,312

    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

  • allanallan Posts: 49,747Questions: 1Answers: 7,345 Site admin

    If you don't need those first three columns to be visible - simply don't include them in either the HTML or the columns array. 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

  • bbrindzabbrindza Posts: 99Questions: 21Answers: 1

    Let me work on the suggestion Allan made. If this works I will let you know or I will provide a test case.

    Bob

  • bbrindzabbrindza Posts: 99Questions: 21Answers: 1

    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

  • bbrindzabbrindza Posts: 99Questions: 21Answers: 1

    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.

  • allanallan Posts: 49,747Questions: 1Answers: 7,345 Site admin

    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

  • bbrindzabbrindza Posts: 99Questions: 21Answers: 1

    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

  • allanallan Posts: 49,747Questions: 1Answers: 7,345 Site admin

    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

  • allanallan Posts: 49,747Questions: 1Answers: 7,345 Site admin

    Could you try this version of FixedColumns please? I believe that should address the problem.

    Allan

  • bbrindzabbrindza Posts: 99Questions: 21Answers: 1

    I tried the GitHub version you provided... still the same problem. Are you testing with the latest jQuery v3.2.1?

  • bbrindzabbrindza Posts: 99Questions: 21Answers: 1

    Allan,
    A bit of new information When I added a rightColumns: 3, the fixedColumns on the left behave as intended .

         fixedColumns: {
                       leftColumns: 5,
                       rightColumns: 3
        },
    
  • allanallan Posts: 49,747Questions: 1Answers: 7,345 Site admin
    Answer ✓

    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

  • bbrindzabbrindza Posts: 99Questions: 21Answers: 1

    That worked Allan . Good work Thank you.

Sign In or Register to comment.