Scroller breaks my table when using search

darrenmarkash

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

kthorngren

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

darrenmarkash

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

allan

Use YouTube, or some other video sharing platform.

Allan

darrenmarkash

https://youtu.be/Wlf_onXYl70

darrenmarkash

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!

allan

Yup seems to work nicely for me - nice one

Allan

darrenmarkash

"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.

kthorngren

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

darrenmarkash

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.

kthorngren

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

darrenmarkash

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?

darrenmarkash

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

darrenmarkash

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

allan

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

darrenmarkash

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.

kthorngren

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

darrenmarkash

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.

darrenmarkash

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

https://youtu.be/b95CkGzds-s

kthorngren

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

kthorngren

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

darrenmarkash

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

kthorngren

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

darrenmarkash

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!

kthorngren

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 Call state.save() after setting the scroll postion:
http://live.datatables.net/wuyoxuvo/2/edit

Kevin

darrenmarkash

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

kthorngren

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