Table jumps back to first row when row click expands

bbrindza

My table will jump back to the top row when I click on an row to expand. How do I prevent this from happening.

var table = $('#timeLogTable_Vacation').DataTable( {
    rowCallback: function(row, data, index){  
            if(data['time_log_date_yyyymmdd'] <= date){
                $(row).find('td:eq(0)').css('color', 'red');
                $(row).find('td:eq(1)').css('color', 'red');
                $(row).find('td:eq(2)').css('color', 'red');
            }
    },
    displayLength:100,
    scrollY: '495px',
    scrollCollapse: true,
    paging: false,
    dom: 'Bfrtip',
    language: {  sSearch: 'Table Search: '},
    buttons: {
        buttons: [ 
                   { text: 'Create Vacation Day',
                     attr: { id: 'displayVacationDayModalButton'},
                     action: function ( e, dt, node, config ) {displayVacationDayModal() }
                  },
                  { text: 'Remove Vacation Entry',
                    className: 'btn-danger',
                    attr: { id: 'removeVacationDayModalButton'},
                    action: function ( e, dt, node, config ) {removeVacationDayModal() },
                    enabled: false
                   }
              ],
                dom: {
                      button: { className: 'btn btn-primary'},
                      buttonLiner: { tag: null }
                     }
    },
    processing: true,
    serverSide: true,
    ajax: {
        url: "ssp_TimeLogTable_Vacation.php",
        dataType: 'json',
        data: {employeeNumber: employeeNumber,
               employeeDepartmentCode: employeeDepartmentCode },
    },
         columns: [
                      { data: 'time_log_year', visible: false},
                          { data: 'employee_last_name', visible: false},
                          { data: 'employee_full_name', visible: false},
                          { data: 'employee_manager_number', visible: false},
                          { data: 'sort_date', visible: false},
                          { data: 'created_by', visible: false},
                          { data: 'created_on', visible: false},
                          { data: 'time_log_date_yyyymmdd', visible: false},
                          { data: 'out_of_office', orderable: false},
                          { data: 'time_log_date', orderable: false },
                      { data: 'total_hours', orderable: false}
                  ],
   select: {style: 'single'},  
   
   order: [[1, 'asc'],[2, 'asc'],[4, 'asc']],
   
   rowGroup: {
               dataSrc: [ 'time_log_year', 'employee_full_name'],
               startRender: function (rows, group, level) {
                   var all;

                   if (level === 0) {
                       top = group;
                       all = group;
                   } else {
                       // if parent collapsed, nothing to do
                       if (!!collapsedGroups[top]) {
                           return;
                       }
                       all = top + group;
                   }
                   
                   var collapsed = !!collapsedGroups[all];

                   rows.nodes().each(function (r) {
                       r.style.display = 'none';
                       if (collapsed) {
                         r.style.display = '';
                       }});

                  //fontawsome + and - 
                  var toggleClass = collapsed ? 'fa fa-minus-circle' : 'fa fa-plus-circle';
                  var groupTD = '';

                    if(level == 0){
                                  groupTD = '<td colspan="' + rows.columns()[0].length +'">' + group + '</td>'
                    }else{
                                  groupTD = '<td colspan="' + rows.columns()[0].length +'">' + '<span style="color:#007bff;" class="fa fa-fw ' + toggleClass + ' toggler"/> ' + group + ' (' + rows.count() + ')</td>'
                     }

                // Add category name to the <tr>
                return $('<tr/>')
                
                  .append(groupTD)
                  .attr('data-name', all)
                  .toggleClass('collapsed', collapsed);

               }
    },
 });//END .dataTable

  $('#timeLogTable_Vacation tbody').on('click', 'tr.dtrg-start', function() {
      var name = $(this).data('name');
      collapsedGroups[name] = !collapsedGroups[name];
      table.buttons(1).disable();
      table.draw(false);
  });
  
  table.on( 'select deselect', function (e, dt, type, indexes) {

     //reset button to disabled
      var selectedRows = table.rows( { selected: true } ).count();
      table.button( 1 ).disable( selectedRows > 0 );
    
      var data = table.rows(indexes).data();
      var timeLogDate = data[0]['time_log_date_yyyymmdd'];
      var createdBy = data[0]['created_by'];
      var employeeManagerNumber = data[0]['employee_manager_number'];

      var surrogateFound = surrogateManagers.includes(employeeManagerNumber);

     if( (createdBy.trim() == userProfile.trim() && timeLogDate <= date) || (surrogateFound == false ))
        {  
           return
          
        }else{
              var selectedRows = table.rows( { selected: true } ).count();
              table.button( 1 ).enable( selectedRows > 0 );
        }
 
  });
  
  $('#timeLogTable_Vacation').on( 'page.dt', function () {
      table.buttons(1).disable();
    });

kthorngren

I assume you are talking about this code to expand the rowGroups?

  $('#timeLogTable_Vacation tbody').on('click', 'tr.dtrg-start', function() {
      var name = $(this).data('name');
      collapsedGroups[name] = !collapsedGroups[name];
      table.buttons(1).disable();
      table.draw(false);
  });

With draw(false) the table should stay on the same page. Similar code in this example seems to work:
http://live.datatables.net/buqecuva/1/edit

The example uses Server Side processing like your code snippet. Please update the example to show the issue.

Kevin

bbrindza

I attached an animation of what I am experiencing with the code I posted.
Notice in the animation, when I scroll down to Taylor, Khalladi and click the row to expand, the table jumps back to the first row, which forces the uses to scroll back down to view the details in the row they expanded.

kthorngren

Please provide a link to your page or a test case showing the issue so we can see what is happening. Or update my example to show the issue. Seeing the animation is not enough for us to debug your code snippets.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

bbrindza

Kevin,

The application I am having the issue with is wired to a dashboard and would be time consuming and difficult to create as a standalone application in a BIN example. Moreover it is behind a corporate firewall so public access is not available.

Your example is not quite what I am doing, my expand/collapse function uses a different technique. Outside of the code snippet I posted there is not much more that I could present that would be helpful.

If you are not familiar with the technique I am using, then perhaps you may not be able to help me.

kthorngren

Your example is not quite what I am doing, my expand/collapse function uses a different technique.

Looks like there is code to handle the multiple levels but in general it looks the same to me. However if you feel the technique you are using is causing the problem then please update my example to show the issue.

If you are not familiar with the technique I am using, then perhaps you may not be able to help me.

Perhaps.

Kevin

bbrindza

Kevin,

I hope you do not feel my reply was rude, I did not suggests that you are not capable of assisting I was just pointing out the difference in your code example vs my snippet of code.

However I found the issue , it is the use of scrollY: '495px'. Once I commented it out the table expand/collapse worked as expected.

The reason why I need this is to lock the header so the user can still see the buttons at the top as they scroll. I tried fixed header but that did not work.

If you have a suggestion or thoughts regarding this, it would be greatly appreciated.

Again I apologize if you felt I was being rude, that was not my intention ... I am not much of a word smith.

kthorngren

Good find. I updated my example to show this:
http://live.datatables.net/gacireza/1/edit

Not sure why scrollY exhibits that behavior. I took a quick look at using something like scrollIntoView() but it didn't work. Maybe its because of the way Datatables handles scrolling.

The Scroller extension has a couple methods to scroll the table:
https://datatables.net/reference/api/#scroller

Not sure either will help but might be worth looking into. You will probably need to get the row index of the closest table row to the group clicked.

@allan or @colin may have other options for you.

Again I apologize if you felt I was being rude, that was not my intention

No worries. I was just agreeing with you.

Kevin

colin

I've been playing around with this and I think it's unavoidable. The draw() will take it to the top of the page. You can use the jQuery scrollTop() to slide down, but then you get a bounce effect which probably isn't very desirable.

Colin

bbrindza

Colin,
What do you mean by a bounce effect.

Is this where the table jumps to the top and then back down to the row expanded?

colin

I was just messing around with scrollTop and realised that it doesn't need it - see here: http://live.datatables.net/gacireza/2/edit

It just needs draw() passed in with page and the position is held. Can you take a look, please, and see if that does the trick for you,

Colin

kthorngren

Interesting, I've never used the page parameter. I've always used false which usually does the trick but not in this case. Leaser something new everyday

Kevin

bbrindza

Colin,
That did the trick. Your are a warlock! Thank you for the assistance.

And thank you Kevin for your input.
We all learned something today that we can share with the community.

DataTables Strong...