How to get rid of Diagonal blue bars when using scroller?

mattw

Hello, I recently started using the scroller instead of pagination for my web app (which I really like).

My only problem is that any table that only has a few records (not one "page" worth of records), I get these blue diagonal bars shown under the rows. Is there any way to get rid of them or auto size the height of the table when I only have a small amount of records?

I use ajax data sourced from a server.

allan

Add scrollCollapse into your DataTables initialisation.

Allan

mattw

Thank you Allan, I had just found that and it seems to work perfect for tables that have less than a full table worth of rows.

On a table with 700 rows though it starts showing only 9 rows with the bottom half of the table showing the blue lines still. If I scroll down a bit it then loads the rows that were previously not shown.

mattw

I think I may have just fixed this by removing
"serverSide": true,

mattw

Removing serverside True breaks some of my features. Is there a way to solve this problem?
"On a table with 700 rows though it starts showing only 9 rows with the bottom half of the table showing the blue lines still. If I scroll down a bit it then loads the rows that were previously not shown."

allan

With only 700 rows, you shouldn't really need Scroller or server-side processing. The client-side should be able to handle that no problem.

Having said that, if you could give me a link to the page with server-side processing and Scroller enabled showing the issue, I can take a look at it.

Allan

mattw

I think my biggest table is 5,000 records.

Unfortunately I don't have a link because it is behind a firewall. The server side does other things in my app so I cannot turn it off.

mattw

Its interesting that on the initial load of the table I get just 9 rows. But then if I scroll down far enough "where the info says about at row 76" then something is triggered and it begins loading normally.

cwills

BTW -- I work with Matt.. here is my observation (to expand on his last post).

It appears that the scroller w/scrollcollapse enabled fails to detect the initial boundary on when to fetch the next batch from the server.

scrollCollapse:false, things seem to work okay -- the initial query to the server pulls in 162 (the value of scroller.displayBuffer * viewportRows -- I'm assuming viewportRows) rows (the ajax request shows length of 162). (The server returns the 162 out of a possible 706). Scrolling down I eventually get a server request for another 162 rows starting at row 20.

Changing scrollCollapse:true, the initial query pulls in just 9 (the value of scroller.displayBuffer) rows (the ajax call shows a length of 9) (The server returns 9 out of the possible 706). If I scroll down far enough (through the "blank rows"), I finally get a server request for 162 rows starting at row 10.

Notice that the scrollCollapse seems to be ignoring viewportRows in the initial query.

cwills

So, I was able to create a hack fix that appears to at least give the right visual behavior while scrolling:

In the function fnMeasure in dataTables.scroller.js

--- dataTables.scroller.js  (revision 1624)
+++ dataTables.scroller.js  (revision 1625)
@@ -433,7 +433,11 @@
 
        if ( heights.row ) {
            heights.viewport = $(this.dom.scroller).height();
-           this.s.viewportRows = parseInt( heights.viewport / heights.row, 10 )+1;
+           if (heights.viewport == 0) {
+               this.s.viewportRows = heights.row - this.s.dt._iDisplayLength;
+           } else {
+               this.s.viewportRows = parseInt( heights.viewport / heights.row, 10 )+1;
+           }
            this.s.dt._iDisplayLength = this.s.viewportRows * this.s.displayBuffer;
        }

As I said, it's a hack -- I'm not quite sure if I've fixed a symptom or fixed the real problem. The one thing that is still not working correctly is when the request to get the next chunk to display the starting row is still incorrect .. it appears that instead of appending to the end of the previous retrieved group, the start is the overlapping towards the start of the previous chunk.

allan

What version of Scroller are you using? There was a bug in the previous version when used with server-side processing which sounds a lot like what you describe.

1.4.3 (the current release) should resolve that.

Allan

mattw

Ok I will try that, we are using scroller 1.4.2

mattw

We updated to 1.4.3 and still have some problems although with some work arounds have solved our problem mostly for the time being and are not using scroll collapse in certain areas. I am going to try to get you a live example at some point of our problem.

allan

That would be awesome - thanks!

Allan