Scroller breaks my table when using search - Page 2

Scroller breaks my table when using search

2»

Answers

  • darrenmarkashdarrenmarkash Posts: 47Questions: 3Answers: 0

    Collapse All.... scroll down the headings a bit and click one ... jumps back to the top.

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

    Still seems to log twice in the console clicking "collapse all" and "expand all"

    Correct. Using table.draw(false); will execute stateSave and table.state.save(); in the scroll event will execute stateSave when the table is scrolled. Collapsing all will cause the scroll event to be called.

    The page is not behaving correctly.

    Like I said I don't see any issues with how the web page is behaving. Please provide details of the problem and how to recreate it. Maybe a video capture will show us the problem.

    Kevin

  • darrenmarkashdarrenmarkash Posts: 47Questions: 3Answers: 0

    I have a video of the error how can I send it so you can view it?

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Use YouTube, or some other video sharing platform.

    Allan

  • darrenmarkashdarrenmarkash Posts: 47Questions: 3Answers: 0
  • darrenmarkashdarrenmarkash Posts: 47Questions: 3Answers: 0

    Weirdly today the code here seems to work !!!!

    http://live.datatables.net/mubedate/1/edit

    Though I still cant get it to work on mine. I have submitted the code in case I've missed something!

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Yup seems to work nicely for me - nice one :)

    Allan

  • darrenmarkashdarrenmarkash Posts: 47Questions: 3Answers: 0

    "Though I still can't get it to work on mine. I have submitted the code in case I've missed something!" ... My code is not showing on here for some reason.

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

    The problem in the video is the table is sorted by the Name column resulting in multiple groups with the same group name. For example you have multiple London groups displayed. When you click a group to expand or collapse any that are London will be toggled. For RowGroup to work properly the first column sorted needs to be the rowGroup.dataSrc column, in your case (2), the Position column.

    You can use orderFixed to always sort by the Position column first then the use can sort by Name or whatever.

    Kevin

  • darrenmarkashdarrenmarkash Posts: 47Questions: 3Answers: 0

    That was a mistake on my part before I took the video.

    I have created a video of my application where you can see me scroll to the bottom, click one of the headings and it jumps back to the top. When I scroll back to the bottom, the heading has opened but as soon as I click it again it jumps back to the top.
    https://www.youtube.com/watch?v=wGynBrGUlnI

    I have tried to upload my code but it does not appear to be showing yet.

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

    Without seeing the problem its hard to say. My guess is you aren't passing the false parameter in draw(). It could be something else on the page is calling draw() without false and is causing the page to go to the top.

    I have tried to upload my code but it does not appear to be showing yet.

    Did you use Markdown code formatting, ie, triple back ticks ```? If not it may be considered spam and not posted to the forum.

    Kevin

  • darrenmarkashdarrenmarkash Posts: 47Questions: 3Answers: 0

    I have just posted my code again with the triple backticks and got a message ...

    "Your comment will appear after it is approved"

    Can you see the post?

  • darrenmarkashdarrenmarkash Posts: 47Questions: 3Answers: 0

    Hi All, what am I doing wrong? My code is not uploading?

  • darrenmarkashdarrenmarkash Posts: 47Questions: 3Answers: 0
    $(document).ready(function() {
    
      var collapsedGroups = {};
      var scrollY;
      var table = $('#index_table').DataTable({
        scrollY: 600,
        pageLength: -1,
        "stateSave": true,
        "bInfo": false,
        "bPaginate": false,
        stateSaveParams: function (settings, data) {
          data.collapsedGroups = collapsedGroups;
          var scrollPosition = $('.dataTables_scrollBody').scrollTop();
          console.log('Saving scroll position: ', scrollPosition);
          data.scrollY = scrollPosition;
    
        },
        stateLoadParams: function (settings, data) {
          collapsedGroups = data.collapsedGroups !== undefined ? data.collapsedGroups : {};
          scrollY = data.scrollY;  // save scrollY value globally
        },
        initComplete: function () {
          $('#index_table_wrapper .dataTables_scrollBody').scrollTop( scrollY );
        },
    
    
        order: [[0, 'asc']],
    
        rowGroup: {
          // Uses the 'row group' plugin
          dataSrc: 0,
          startRender: function (rows, group) {
            var collapsed = !!collapsedGroups[group];
            rows.nodes().each(function (r) {
                r.style.display = collapsed ? 'none' : '';
            });
    
            var projTitle = rows.data()[0][1];
    
            return $('<tr/>')
            .append('<td colspan="2"><a href="project.php?projNo='+group+'" data-toggle="tooltip" data-placement="top" title="View Project" class="btn btn-info btn-xs mdi mdi-magnify mr-1"></a><a href="add_page.php?projNo='+group+'" data-toggle="tooltip" data-placement="top" title="Add New Page" class="btn btn-success btn-xs mdi mdi-plus-circle-outline"></a></td><td colspan="1"> ' + group + '</td><td colspan="4">' + projTitle +'</td>' )
                .attr('data-name', group)
                .toggleClass('collapsed', collapsed);
          }
        }
      });
    
      $('#index_table tbody').on('click', 'tr.group-start', function () {
          var name = $(this).data('name');
          collapsedGroups[name] = !collapsedGroups[name];
          table.draw(false);
      });
    
      $('#expandAll').on('click', function () {
       table.column(0).data().unique().each( function (d) {
         collapsedGroups[d] = false;
       } );
       table.draw(false);
     });
    
      $('#collapseAll').on('click', function () {
       table.column(0).data().unique().each( function (d) {
         collapsedGroups[d] = true;
       } );
       table.draw(false);
     });
    
     // Save the state when scrolling
    $( "#index_table_wrapper .dataTables_scrollBody" ).scroll(function() {
      table.state.save();
    });
    });
    
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Unfortunately your message was being picked up by the automatic spam filter for some reason. I've marked your account so that won't happen again.

    I think you will need to create a test case at http://live.datatables.net for us to be able to help much with this one.

    Allan

  • darrenmarkashdarrenmarkash Posts: 47Questions: 3Answers: 0

    I have found the line thats causing the issue which might mean someone can fix it quickly.

    scrollY: 600

    If I remove this line then the scroll position is remembered perfectly even after clicking one of the records.
    If I add this line back in, the scroll position is remembered but when you click a row header it jumps back to the top.

    I have been fiddling for a few hours but am still stuck.

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

    If I remove this line then the scroll position is remembered perfectly even after clicking one of the records.

    Sounds like you are using the web browsers scrolling functionality.

    If I add this line back in, the scroll position is remembered but when you click a row header it jumps back to the top.

    That is expected behavior. The same happens when sorting in this example. When you sort the column what do you want to happen when you sort the table? If you stay at the same scroller position the table may or may not show the rows the user is looking at.

    Kevin

  • darrenmarkashdarrenmarkash Posts: 47Questions: 3Answers: 0

    I have my page set up with a fixed div above the data table (red box in the image below) which has some buttons and the column headings separately to the table. I don't need or want the user to be able to sort the columns. I need the headers to be locked when scrolling down but couldn't make sticky headers work so went for this option.

    The behaviour I want is the table to remember the scroll position when...

    • Page reloaded (works without "scrollY")

    • User collapses or expands an individual header (works without "scrollY" but with it enabled "scrollY" is always set to 0 when clicking a header. It shows "Saving scroll position: 0" 3 times in the console as well?)

    • User clicks a record and returns to this screen (works **with ** "scrollY")

    At the moment I have the console logging out the scroll position and saving as per the code above. I was thinking I need to add a "table.state.save();" to the "tr.group-start" function but this won't work.

  • darrenmarkashdarrenmarkash Posts: 47Questions: 3Answers: 0
    edited August 2021

    I have created another video to show the behaviour ....

    https://youtu.be/b95CkGzds-s

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

    AFAIK the last example we worked with works properly:
    http://live.datatables.net/mubedate/1/edit

    Does it behave as you want? If not please provide the steps to replicate the problems.

    In order to help debug we will need to see the problem happen. Please update the test case or provide a link to your page or test case that shows the issues.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

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

    Its hard to tell what is happening with the video. When you click on a rowGroup row and the console log shows 0 for the scroller position does the table scroll to the top? Just trying to understand if the table scrolls or if the scroll position value is wrong. We will still need a link to a page showing the issue to help debug.

    Kevin

  • darrenmarkashdarrenmarkash Posts: 47Questions: 3Answers: 0

    I created a test case here.

    http://live.datatables.net/mohovira/1/edit

    If you click "Expand All" and then scroll down and click headings they collapse as expected without jumping to the top, the scroll position in the console is correct.

    If you click "Collapse All" and then scroll down and click headings to expand them, they expand but everything jumps to the top and the scroll position in the console shows the position as zero!

    Hope this helps someone work out what's happening!

    Darren

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

    The helps, thanks. Looks like its something internal with draw() that is causing the table to scroll to the top. @allan or @colin may be able to answer why this behavior exists. One workaround is to capture the current scroll position before calling draw() in your tr.group-start click event then reset the position after draw(). For example:
    http://live.datatables.net/wuyoxuvo/1/edit

    Its not perfect and will need some testing to verify the workaround and adjust to behave the way you want. You may decide to check if the group is expanded and scroll down a bit to show one or more expanded rows. You will see this with the last group.

    Kevin

  • darrenmarkashdarrenmarkash Posts: 47Questions: 3Answers: 0

    Hi Kevin

    Thanks so much for looking at this ... I think we are almost there!

    There seems to be a bit of a bug with storing the scroll state after refresh sometimes.

    "Its not perfect and will need some testing to verify the workaround and adjust to behave the way you want. You may decide to check if the group is expanded and scroll down a bit to show one or more expanded rows. You will see this with the last group."

    That would be perfect if we could get that to work as well!

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

    Doesn't look like the scroll event is called after setting the scroll position. Which is good because it would cause in infinite loop with stateSave :smile: Call state.save() after setting the scroll postion:
    http://live.datatables.net/wuyoxuvo/2/edit

    Kevin

  • darrenmarkashdarrenmarkash Posts: 47Questions: 3Answers: 0

    Everything seems to work perfectly!!!!!
    If you got really bored and fancied your hand at the "check if the group is expanded and scroll down a bit to show one or more expanded rows" then I am grateful but tbh I am more than grateful for everything you have helped with!
    Thanks again.
    Darren

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

    This is very simplistic, ie, doesn't take into consideration if its the last group.
    http://live.datatables.net/wuyoxuvo/3/edit

    It just checks the collapsedGroups to see if the group is collapsed. If not adds 50 to the scrollposition. I'll leave it to you to test and update as needed.

    Kevin

Sign In or Register to comment.