Scroller issues

yvetee

Need to load page in last row(page).

Now, i see the vertical lines on body after loading. And, scroll to last page, stop in the middle.

Would like to load in last page, rather than scrolling.

Full demo with all my code

live.datatables.net/kamixivu/1

use:
boostrap
font awesome
datatables
scroller

rf1234

Would like to load in last page, rather than scrolling.

Why are you using scroller if you actually want paging?

yvetee

I want the scroller to be on bottom on load. Last rows or bottom of the table, is the same as last page.

colin

It would be worth looking at this thread. It's on our list to look at still, but that user is trying to do just that. In the code on that thread, it's not working for that user, but it is here for me: http://live.datatables.net/lufamapo/1/edit

You could use that as a template, and keep an eye on that other thread as we'll post a response there early next week.

Colin

kthorngren

I took the example we were working with in your other thread and updated it to use Scroller:
http://live.datatables.net/yodasuro/7/edit

Same concept in that there seems to be some sort of race condition that the Ajax request in initComplete isn't sent unless there is the slightest delay added.

Does this help you?

Kevin

yvetee

Thank you Kevin,

have a look in this demo
live.datatables.net/yodasuro/14/edit

it is yours demo plus font awesome in html.
You will notice around -100rows from bottom in load.

If i add also bootstrap 3.3.7, then the scroller goes until the middle.

This is what i use in my code:

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/scroller/2.0.1/css/scroller.dataTables.min.css">
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap.min.js"></script>
  <script src="https://cdn.datatables.net/scroller/2.0.1/js/dataTables.scroller.min.js"></script> 

kthorngren

I updated the example to have all the correct JS and CSS files:
http://live.datatables.net/sabuveka/1/edit

With my example the server side request asks for this data:

start: 3827
length: 54

What I found is that Datatables requests this data:

start: 2374
length: 36

This is with the table configured like this:
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%" >

You can use scroller.rowHeight to adjust the row height calculation. You can uncomment the value I used - just used the value in the docs example. Datatables requests this:

starrt: 3818
length: 63

You can uncomment the rowHeight: 30 to see this.

Also you may be interested in this thread if you need to remove the background strips. I added the recommended CSS to the CSS tab.

Kevin

yvetee

Thank you Kevin.

I will perform test and i will let you know.

Once again, thank you for your time and help.

yvetee

I updated my code base on your code. First look is fine but then i noticed something strange.

If you scroll 5 rows up, wait, again 5 up, wait, 5 rows up, wait,...
you will notice a mix data in some rows.

Here is a demo:

live.datatables.net/xaqocevo/1

kthorngren

Scroller keeps a buffer of rows. If you look at the Ajax request you will see its fetch 108 rows at a time.

start: 2910
length: 108

One thing you might want to do is check the pixel height of your rows using the browser's inspect tool. In the example it looks like 47. Not sure if it makes a difference between using rowHeight: 30 and rowHeight: 47 but I changed it since I noticed what you did with the rows changing. That didn't fix the problem.

I noticed the row change each time it fetched data from the server. Going back and forth between two buffers I compared the data and see the following:

Scrolling up it fetched some data and this is part of the response:

        ["", "18\/07\/2019", "\u03a3\u03c9\u03c4\u03ae\u03c1\u03b7\u03c2", "4.500", null, "4.500", "Doctor", "\
        ["", "19\/07\/2019", "\u0394\u03b9\u03ac\u03c6\u03bf\u03c1\u03b1", "9", null, "9", "Doctor", "\u039c\u0
        ["", "19\/07\/2019", "\u0394\u03b9\u03ac\u03c6\u03bf\u03c1\u03b1", "242", null, "242", "Doctor", "\u039
        ["", "19\/07\/2019", "\u0394\u03b9\u03ac\u03c6\u03bf\u03c1\u03b1", "253", null, "253", "Doctor", "\u039
        ["", "19\/07\/2019", "\u0394\u03b9\u03ac\u03c6\u03bf\u03c1\u03b1", "137", null, "137", "Doctor", "\u039
        ["", "19\/07\/2019", "\u0394\u03b9\u03ac\u03c6\u03bf\u03c1\u03b1", "12", null, "12", "Doctor", "\u039c\
        ["", "22\/07\/2019", "\u0394\u03b9\u03ac\u03c6\u03bf\u03c1\u03b1", "200", null, "200", "Doctor", "\u039 

I scrolled back down to the previous buffer then back up to fetch the same buffer as above. This is part of the response:

        ["", "18\/07\/2019", "\u03a3\u03c9\u03c4\u03ae\u03c1\u03b7\u03c2", "4.500", null, "4.500", "Doctor", "\u
        ["", "19\/07\/2019", "\u0394\u03b9\u03ac\u03c6\u03bf\u03c1\u03b1", "242", null, "242", "Doctor", "\u039c
        ["", "19\/07\/2019", "\u0394\u03b9\u03ac\u03c6\u03bf\u03c1\u03b1", "253", null, "253", "Doctor", "\u039c
        ["", "19\/07\/2019", "\u0394\u03b9\u03ac\u03c6\u03bf\u03c1\u03b1", "137", null, "137", "Doctor", "\u039c
        ["", "19\/07\/2019", "\u0394\u03b9\u03ac\u03c6\u03bf\u03c1\u03b1", "12", null, "12", "Doctor", "\u039c\u
        ["", "19\/07\/2019", "\u0394\u03b9\u03ac\u03c6\u03bf\u03c1\u03b1", "9", null, "9", "Doctor", "\u039c\u03
        ["", "22\/07\/2019", "\u0394\u03b9\u03ac\u03c6\u03bf\u03c1\u03b1", "200", null, "200", "Doctor", "\u039c

Notice it is in a different order. Specifically the 4th column of the first buffer has the order of:
4.500
9
242
253
137
12
200

The second example has a different order:
4.500
242
253
137
12
9
200

This change is causing what you are seeing on the page with the data moving. Your server script needs the query updated so it returns the data in a consistent order.

Kevin

yvetee

Hello Kevin,

It seems like that my local server (xampp - mariaDB) and share server (MySQL) online are showing different result in same sql query. I am trying to fix this issues as I think it will fix all issues. It seems to me it is settings problem. I will let you know.

yvetee

Hello Kevin,

Your solution fix the problem, row height. The rest was demo server issues as it was share online server. Didn't spend time to found what it was. I continue with xampp as demo server and everything is fine.

Once again, thank you for your help.

With regards,
Yvetee

kthorngren

Glad you got it working. Was an interesting problem to help with

Kevin

yvetee

Hello Kevin,

https://dev.mysql.com/doc/refman/5.7/en/limit-optimization.html

the problem.

with regards,
Yvetee