Scroller breaks my table when using search

darrenmarkash

I have used scroller only as I need to save the scroll position.

If I don't have scroller enabled and search for "123" I get this view

If I enable it I get this view

Why is it shrinking the height of the table and adding a scroll bar?

I am also using the 'row group' plugin

Regards
Darren

kthorngren

Looks like you are using the RowGroup extension. The Compatibility matrix shows the Scroller extension is not compatible with RowGroup. Are you using RowGroup with Scroller?

Kevin

darrenmarkash

Hi Kevin, Yes I am using Rowgroup and I cannot remove that. The only reason I am using scroller was to save the position of the scroll bar ... maybe I can do that another way and removed scroller?

kthorngren

The only reason I am using scroller was to save the position of the scroll bar

Are you asking about the scroll bar generated by scrollY or the browser?

What is happening that is causing the scroll bar position to not be saved. In other words we need more details of what you are doing so we can offer suggestions. A link to your page or a test case showing the issue will give us the best understanding.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

darrenmarkash

Yes, the scrollY option. I have the following code.....

"bLengthChange": false,
"bInfo": false,
"searching": true,
"sort": false,
"responsive": true,
 deferRender:    true,
 scrollY:        550,
 scrollCollapse: true,
 scroller:       true,
"stateSave": true,

I have set scrollY to 550 but when I use "search" it shrinks the content as shown above.

I cannot share the page as it sits on my company internal network :-(

darrenmarkash

I have changed the code to ....

"bLengthChange": false,
"bInfo": false,
"searching": true,
"sort": false,
"responsive": true,
"stateSave": true,

and it still saves the scroll postion ... what it doesnt do is lock the "Search" box at the top of the page which is the reason I ended up using scroller in the first place!

darrenmarkash

I have removed Scroller completely, set "scrollY": "550px" which locks the search box in position. The only thing missing is the remembering of scroll position which is a shame. I am turning it off today but if anyone knows how to save the scroll position of the scrollY without breaking as above....

kthorngren

When you say save the scroll position are you referring to stateSave?

Please provide more details about the issue and when it occurs.

Kevin

kthorngren

Can you provide an example here:
http://live.datatables.net/

Kevin

darrenmarkash

I have modified http://live.datatables.net/takurura/12/edit

I have just added "scrollY": "600px", to be able to lock the search bar but the scroll position is forgotten. If I take this line out the stateSave works fine.

kthorngren

Just to make sure I understand the problem. You are wanting the scroll position of scrollY saved using stateSave, correct?

Kevin

darrenmarkash

@kthorngren yes thats correct.

kthorngren

I'm not sure that the scrollY position is saved using stateSave. @allan or @colin might be able to say or give you an idea of how you can save and load the position using stateSaveParams and stateLoadParams.

Kevin

darrenmarkash

@allan or @colin is this something you can help with?

darrenmarkash

@allan or @colin is this something you can help with?

allan

When you have Scroller enabled (which you do appear to), then yes state saving should work for the y position.

Do you have the Scroller extension being loaded on the page?

Allan

darrenmarkash

@allan I did have the scroller extension but it displayed the behaviour as seen at the top of this post so I can to remove it.
The Compatibility matrix shows the Scroller extension is not compatible with RowGroup but
I noted that if I just used scrollY it fixed the search bar in position (which is what I want) but then does not save the scroll position. ( does work if I remove scrollY)
I guess I want the best of both worlds! :-)

allan

Yup sorry - state saving with scrollY on it's own at the moment just doesn't work.

It would need modification of the state object (the scrollTop value of the scrolling container would do) in stateSaveParams and then use stateLoaded to restore the position (it might need to wait until the draw event). So possible, but it would need a little work.

Allan

darrenmarkash

@allan ... Could you use local storage to save the current top row and then set it back?
This is a real show-stopper for my project as I have 100's of rows and every time a row is clicked to go to the record when they come back the table is at the top again. :-(

I currently have this code ....

  $('#index_table tbody').on('click', 'tr.group-start', function () {
      var name = $(this).data('name');
      collapsedGroups[name] = !collapsedGroups[name];
      table.state.save();
      table.draw(false);
  });

Could it be added in here somewhere?

This is the table you helped with before.
http://live.datatables.net/takurura/7/edit

allan

The state saving that DataTables uses makes use of localStorage, yes. So if you go down the route I describe above, then yes, it would use that. Alternatively, you could just do your own state saving for this one.

Allan

darrenmarkash

@allan I have been trying for days but cannot make it work ... if you get the time and could do a demo I would be eternally grateful! :-)

kthorngren

Here is an example based on Allan's comments:
http://live.datatables.net/piyivupo/1/edit

Added a jQuery scroll event handler to save the scroll position. Used initComplete to set the loaded scroll position. As Allan mentioned setting it in stateLoaded is too soon.

The tricky part is knowing the selector to use. scrollY clones the table elements to facilitate scrolling. I used $('#example_wrapper .dataTables_scrollBody') to get the scrolling container. Change example to the id of your table on your page.

Kevin

darrenmarkash

@kthorngren Thank you so much!!!!! It works perfectly! I can see the light at the end of the tunnel for my project! :-)

darrenmarkash

@kthorngren I spoke too soon! :-(

I added the code to this demo (you helped with this before) and it seems to work at first but once you have scrolled and then click one of the headings it jumps around the screen randomly?

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

kthorngren

I'm not seeing anything randomly jumping around the screen. When I sort a column the table is scrolled to the top. The scroll event is probably called but it is only saving the state. The only time the scroll position is updated is in initComplete so it only happens once.

Please more details about the problem, like what is jumping, and steps to recreate.

Kevin

darrenmarkash

@kthorngren When I click in the example sometimes multiple rows open and close. Looking in local storage I see the scrollY variable changing as I scroll but it resets to zero when a row group is clicked which I assume is wrong.

darrenmarkash

I think maybe I need to set the scrollY variable in here?

  $('#example tbody').on('click', 'tr.group-start', function () {
      var name = $(this).data('name');
      collapsedGroups[name] = !collapsedGroups[name];
      table.state.save();
      table.draw(false);
  });

kthorngren

when a row group is clicked which I assume is wrong.

When you said clicking the heading I thought you meant in the header row to sort the table.

When I click in the example sometimes multiple rows open and close.

I'm not seeing this. When I click a rowGroup it toggles the one group. Have you tried the example without the code to see if it behaves the same?

resets to zero when a row group is clicked which I assume is wrong.

I've only seen it be zero when at the top of the table, like clicking collapse all. I added a console.log statement to see what is saved.
http://live.datatables.net/requyaki/2/edit

Tried many times but haven't seen this reset to zero when clicking on the rowGroups.

Have you tried different browsers?

Kevin

darrenmarkash

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

If I click "collapse all", in the console I see the following.

"Saving scroll position: "
0
"Saving scroll position: "
0
"Saving scroll position: "
0

If I then scroll one mouse wheel revolution down so I can see "New York (2) Sales Assistant", the console says "saving scroll position: 100" if I then clear then console and click on the "New York (2) Sales Assistant" heading I see 4 entries in the console ...

"Saving scroll position: "
100
"Saving scroll position: "
0
"Saving scroll position: "
0
"Saving scroll position: "
0

Does it look like it's firing 3 times with a value of zero?

kthorngren

Your example is calling stateSave multiple times. In your 3 click events there is a call to table.state.save(); and table.draw(false);. Both are causing stateSave to save. The scroll event is calling table.state.save();. This is why you are seeing 3 calls to stateSave. You can probably remove table.state.save(); from your three click events and just use draw() to execute stateSave.

Is the web page behaving incorrectly or are you just asking about what is saved?

Kevin

darrenmarkash

I have removed the saves from the 3 click events but it still won't work properly even in the demo http://live.datatables.net/mubedate/1/edit

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

The page is not behaving correctly.