Table jumps back to first row when row click expands

Table jumps back to first row when row click expands

bbrindzabbrindza Posts: 299Questions: 68Answers: 1

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();
    });

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 20,147Questions: 26Answers: 4,736

    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

  • bbrindzabbrindza Posts: 299Questions: 68Answers: 1

    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.

  • kthorngrenkthorngren Posts: 20,147Questions: 26Answers: 4,736

    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

  • bbrindzabbrindza Posts: 299Questions: 68Answers: 1

    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.

  • kthorngrenkthorngren Posts: 20,147Questions: 26Answers: 4,736

    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

  • bbrindzabbrindza Posts: 299Questions: 68Answers: 1

    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.

  • kthorngrenkthorngren Posts: 20,147Questions: 26Answers: 4,736

    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

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    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

  • bbrindzabbrindza Posts: 299Questions: 68Answers: 1

    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?

  • colincolin Posts: 15,118Questions: 1Answers: 2,583
    Answer ✓

    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

  • kthorngrenkthorngren Posts: 20,147Questions: 26Answers: 4,736
    Answer ✓

    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 :smile:

    Kevin

  • bbrindzabbrindza Posts: 299Questions: 68Answers: 1

    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... :)

This discussion has been closed.