Is scrollY required for Scroller? And other questions

Nick Hope

I have longish table, currently 1826 rows, at https://fplform.com/fpl-manager-ranking. It loads slowly.

To try and speed it up, I have partially implemented server-side processing, with Scroller, at https://fplform.com/fpl-manager-ranking-ssp.

I have 3 issues and questions about it:

1. My code to rank empty cells at the bottom when doing an ascending search (based on absoluteOrder and absoluteOrderNumber) does not work. How much work is this likely to be to implement on the server-side (assuming it can be done), and has anyone got an example of it?
2. My code to make the first column always be an ascending rank only works until the first "Loading..." operation (i.e. If you scroll down quickly, it breaks). Could that be implemented on the server-side?
3. I really like how the client-side version fills the browser. By comparison, from a usability perspective, I don't like using scrollY and scrollX as much, especially having to limit the height of the table to ensure it can be seen on all displays. And I don't really want to use actual pagination. Is it feasible to use server-side processing with the full-browser-scrolling approach, or are scrollY and scrollX simply required for it to work at all?

I'd also be interested in others' impressions of the loading speed for my current client-side version (to help decide if it's worth the effort to pursue server-side processing any further)?

Ref. #1 & #2, here's my existing code:

//Empty Twitter handles at bottom
var twitterType = $.fn.dataTable.absoluteOrder( [
   { value: '', position: 'bottom' }
 ] );

//Empty number cells at bottom
var numbersType = $.fn.dataTable.absoluteOrderNumber( [
    { value: '', position: 'bottom' }
] );

//Make the first column an ascending rank that never changes
table.on( 'order.dt search.dt', function () {
    table.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
        cell.innerHTML = i+1;
    } );
} ).draw();

kthorngren

1. I'm pretty sure the absoluteOrder.and absoluteOrderNumber are for client side processing only and won't be in affect with server side processing. I would do some research for the database you are using to see if there are queries you can use to sort the data similar to these plugins.

2. If you are using a SQL like database I think there are some techniques to add an index type column. Stock Overflow or other resources would be a good place to look. If using client side processing you can move that code into initComplete to have it run only once.

3. Have you tried using ajax loaded data without enabling server side processing? You can then use pageLength with -1 to display all rows without paging and let the browser perform the scrolling.
   Scroller uses scrollY for scrolling. It won't work with the browser scrolling. Server side processing is a server based paging protocol. It requires some sort of paging whether normally with the paging buttons or through the scroller extension (which requires paging too). See the Install docs.

Basically I would try your page with client side processing to see if the performance is acceptable.

Kevin

allan

Just to add to what Kevin has already correctly pointed out, if you did want to try server-side processing and retain the full page scrolling, looking like all records are on the page, then yes, scrollX and scrollY, plus Scroller would be the way to do it. Scroller basically makes use of the pagination to display a sub-set of the records available (the ones calculated to be visible).

Allan

Nick Hope

Thank you very much for your suggestions, which I am following up.

The thing I dislike with scrollX and scrollY for a very large table is that, on a computer, they don't give that full-browser scrolling. The scrolling is done with scrollbars on the edges of the table rather than the scrollbars on the edge of the browser. And the height is difficult to maximize across varying displays resolutions.

Actually, for this page, I am finding that I am getting a decent speed increase using serverSide: true and pageLength: -1 but without Scroller or scrollY or scrollX at all. See https://fplform.com/fpl-manager-ranking-ssp-no-scroller. It's not as quick as server-side + Scroller, and I still need to get the absolute sorting working, but the ranking column Javascript works as is. It may be the best compromise.

My database is MySql. I will look into queries that will help with the absolute sorting.

kthorngren

For the sorting plugins to work you will need to turn off server side processing, ie, remove serverSide: true.

Kevin

allan

I think for this case, rather than using server-side processing, just Ajax load the data. There is no point in using server-side processing with paging disabled (or a page length of -1) - since all rows would be loaded from the server-side anyway.

You have the ability to get the data via Ajax / JSON, so I think client-side processing, with Ajax sourced data is the way to go. That way you can use the client-side sorting plug-ins you had, and also get your full page scrolling.

Allan

Nick Hope

Thanks again. That's the current approach I'm taking with my current effort at https://fplform.com/fpl-manager-ranking-ajax.

My absoluteOrder() function to put empty Twitter cells at the bottom is behaving correctly.

However I can't get absoluteOrderNumber() to put empty cells in the rank columns at the bottom. Here's the relevant code:

var numbersType = $.fn.dataTable.absoluteOrderNumber( [
    { value: '', position: 'bottom' }
] );

columnDefs: [
    {
        type: numbersType,
        targets: [8, 9, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29]
    },

It works fine in the non-Ajax version. The html for empty cells in both versions is just <td class="sorting_1"></td>. If I set, for example, value: 5, it will put correctly put cells containing "5" at the bottom. It just won't work for empty cells and I can't figure out why.

Any ideas?

allan

It looks like your empty data is null rather than an empty string. Typing is more important when using JSON data.

Allan

Nick Hope

Arrgghh I had tried that but (with my PHP/SQL head on) in upper case! Works in lower case.

The full load time for the page is down from about 8 secs to 6 secs by using Ajax. There is probably more I can streamline.

Thanks Allan & Kevin.