When calculating the display of the number of rows in the viewport for the table information, Scroller isn't taking the x-scrollbar into account, as it can take ~16 pixels.

See thread 21200 for more information

While using scroller there is a possibility that the stripe classes can change for the displayed rows. For example

                          --- sStripe ---
iRowCount  iDisplayStart  IS   SHOULD BE
2          0              odd  odd
2          1              odd  even

The problem can be solved by including the first rendered row number to the calculation of the class.

Change https://github.com/DataTables/DataTables/blob/1.10.5/media/js/jquery.dataTables.js#L2010 from
var sStripe = asStripeClasses[ iRowCount % iStripes ];
to
var sStripe = asStripeClasses[ (iDisplayStart + iRowCount) % iStripes ];

Now, I guess this could make paged rendering (eg when page size is 5) to weirdly start from even instead of odd, so maybe you could somehow detect if scroller is in use before using this code.

issue moved from https://github.com/DataTables/DataTables/issues/529

Please add a license key to bower.json. It's required by some deployment tools, like webjars.

And thanks for this great library!

Repro:

1. Go to https://datatables.net/extensions/scroller/
2. Click inside the scroll frame
3. Page down a few times rapidly

After a few page downs, the scroller stops paging down and the parent page is scrolled instead, which makes paging through larger datasets more or less impossible with the keyboard.

This doesn't happen all the time but it's > 50% of the time for me (Chrome 41).

The problem appears to occur concurrently with a redraw of the table; that is, the keyboard events are handled correctly as the table is scrolled by the browser, but they stop working once the table has been redrawn to include new data.

Hey, maintainer(s) of DataTables/Scroller!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library DataTables/Scroller is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "DataTables/Scroller",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

It would be helpful if we could set a fixed data page size, which can help with http request caching and also avoid the situation where first you request 0-49 and some scrolling later 5-54. This gets worse with smaller scrollY values as the smaller visible area causes more requests (think 0-8 > 1-9 > 2-10 etc.).

So for example, if we have pageSize=50:

1. lets assume that according to the table setup we decide that we should fetch 0-20
2. using the page size we can cover this range with a single page of 50 rows, so we request 0-49
3. later, when we need 5 more rows - ie <something>-54 (49+5), we instead request the next full page that covers it, 50-99.

I am not sure about the best way (least intrusive) to acomplish this. I think a mechanism that requests data in pages and renders all pages that intersect with the current calculated range (so if we need 45-60 we render 0-99).

Also, at this point some internal caching could be helpful so that if we we have 0-49 and we need some extra rows, we won't have to get 0-99, just the extra page of 50-99 and combine them. Not sure though if that's possible.

The pros of this approach are:

• better http caching possibilities
• less overall load
• improved predictability of load (depends on the size of the scrollY less than the current implementation)
• reduction of load during table resize (I use tables in panels that start small [5-10 rows] but have user controls for larger size [20-30 rows] and fullscreen [can reach 50+ rows for spreadsheet like views]).

By the way, to avoid any confusion: when I refer to page size I am not talking about the paging mode (vs scroller). I mean a fixed requested-data length.

The following snippet in datatTables.scroller.css prevents correct highlighting. So far, I did not have any issues without it, so I guess it is not needed.

div.DTS tbody tr.even {
background-color: white;
}

It would be really nice if you didn't have to specify scrollY (which by the way is missing from the documentation as a required parameter). I really want the table to always be as tall as it is needed for the amount of rows that is selected to be shown, but still do pagination via scrolling.

I just run into following bug manipulating the displayBuffer setting using the latest releases of both DataTables and Scroller: when displayBuffer is set to a value other than 1 aoData gets undefined and scrolling won't work any longer.

Please have a look at the following demonstrations:

displayBuffer: 2 aoData is undefined
Demo: http://live.datatables.net/zijadok/1
Edit: http://live.datatables.net/zijadok/1/edit?html,js,output

displayBuffer: 1 everything is fine
Demo: http://live.datatables.net/zijadok/2
Edit: http://live.datatables.net/zijadok/2/edit?html,js,output

displayBuffer not set everything is fine
Demo: http://live.datatables.net/zijadok/3
Edit: http://live.datatables.net/zijadok/3/edit?html,js,output

Hi guys, is it possible to add also this fix in future version? (maybe in 1.0.3 version :)

http://datatables.net/forums/discussion/9026/datatables-scroller-plugin-white-space-at-top-issue-and-fix-provided/p1?post#Form_Body

Many Thanks.

As per the discussion in http://datatables.net/forums/discussion/18761/ - Scroller should be using the dynamic class names.

Hi,

the scrolling example at http://datatables.net/release-datatables/extensions/Scroller/examples/api_scrolling.html is not working:

api.scroller.scrollToRow is not a function

I wonder how to access this function (as well as the others like measure()).

Best regards!

I am having an issue where the API method .rows().nodes() does not return all of the rows that are associated with the table when deferRender is true and I am using the data option:

$("#table").dataTable({
    dom: "frtiS",
    deferRender: true,
    scrollY: "150px",
    data: data,
    initComplete: function() {
        // Does not return all rows
        $("span").html($("#table").DataTable().rows().nodes().length);
    }
});

This issue appears to only occur if using deferRender, scrollY, and data. If I store the table data in the DOM, then the correct number of rows are returned. If I do not use scrollY, then the correct number of rows are return.

See the following jsFiddle where a DataTable is loaded according to the configuration above. 5000 rows are loaded into the table, but DataTables incorrectly states hat only 45 nodes exist:

http://jsfiddle.net/8dqfcr6t/1/

Any ideas how to mitigate this issue? Tested on Firefox and Chrome.

when using scroller 1.3 it ignores the column width when there's no content in the table.

after adding content the columns are displayed with the correct width.
But using table.draw() or even table.draw('page') resets the column width again then.

This doesn't occur when using 1.2.2.

Any idea how to debug?

As per the title!

Hi,

It may be useful to include the composer.json file to install with composer fron packagist, like DataTables/DataTables.

thanks

Is the rowHeight parameter still supported? It is not referenced in the readme docs though it is in the code docs.

* "oScroller": {
*     "rowHeight": 30
* }

Using the follow options did seem to work though is it an incorrect usage?

options.oScroller =
    heights:
        row: 150

The AMD module identifier datatables-scroller is not valid according to https://github.com/amdjs/amdjs-api/wiki/AMD#module-id-format-.

A term must be a camelCase identifier, ".", or "..".

When viewing a scroller table, the heading does not automatically re-adjust if a user re-sizes the page. However, this issue will resolve if a user clicks to sort a column or refresh.

When using the Scroller extension and the language option on a table, there will be a JS error

jquery.dataTables.min.js:55 Uncaught TypeError: Cannot read property 'style' of undefined

The initialization options:

{
  "language": {
    "url": "https://cdn.datatables.net/plug-ins/1.10.12/i18n/Slovak.json"
  },
  "scroller": true
}

An output example: test.html.zip

Since nobody else is complaining about this, my guess that this is happening to us due to the various ways that we're abusing/misusing DataTables (simulating infinite scroll, using fixed columns, sizing through CSS).

As the subject line says, when we scroll to the bottom of our virtual area, a redraw isn't triggered. Fixed in the attached PR.

There seems to be a problem when the table is scrolled to its end by pressing the End key.

What happens is that instead of displaying the last rows of the table, a blank space is displayed instead. It is rather tricky, though, because it does not occur on every case.

https://www.datatables.net/extensions/scroller/examples/initialisation/large_js_source.html

In the sample provided in the link above, do the following to reproduce the issue.

1.) Order the table by Last name in ascending order (click table header once).
2.) Click anywhere on the table aside from the headers (e.g. first row).
3.) Press the "End" key.

Plugin uses for background scroll frame it works fine for Chrome and Firefox, but in IE I have border around this element. After some experiments found that it has something to do with data='about:blank'.

It looks like scroller doesn't work: http://datatables.net/extensions/scroller/

I have similar issue after upgrading from datatables 1.10 beta 2 to final version.

There is an nHoldings DOM element that seems to have been introduced in DataTables 1.10 that is causing an issue in the _fnCalcRowHeight function of scroller.

Proposed fix incoming.

Hello again,

Sorry to take your time again, but i came up with a possible partial solution to the problem, and i would like to share with you, so you may consider it and tell me if i'm doing something wrong.

I came up with a level system, based on a certain amount of rows enough to avoid making so many AJAX requests, and overlapping just a small part to ensure the infinite scroll position.

I still have two problems to solve:
1 - When a new request is made and rows are updated, the position of the table is higher/lower than it should be, by 1 or 2 lines. I think this problem is happening because Scroller is forcing start row to be an odd one.
2 - Cache the small part left so no overlapping exists at all.

First, in Settings (this.s), after "loaderVisible: false", i define a start level = 1;
Then i update the _fnScroll function as it follows (changes are marked with (AM):

/**

• Scrolling function - fired whenever the scrolling position is changed.
• This method needs to use the stored values to see if the table should be
• redrawn as we are moving towards the end of the information that is
• currently drawn or not. If needed, then it will redraw the table based on
• the new position.
• @returns {void}
• @Private
  */

"_fnScroll": function ()
{
var
that = this,
heights = this.s.heights,
iScrollTop = this.dom.scroller.scrollTop,
iTopRow;

    if ( this.s.skip ) {
        return;
    }

    if ( this.s.ingnoreScroll ) {
        return;
    }

    /* If the table has been sorted or filtered, then we use the redraw that
     * DataTables as done, rather than performing our own
     */
    if ( this.s.dt.bFiltered || this.s.dt.bSorted ) {
        this.s.lastScrollTop = 0;
        return;
    }

    /* Update the table's information display for what is now in the viewport */
    this._fnInfo();

    /* We don't want to state save on every scroll event - that's heavy
     * handed, so use a timeout to update the state saving only when the
     * scrolling has finished
     */
    clearTimeout( this.s.stateTO );
    this.s.stateTO = setTimeout( function () {
        that.s.dt.oApi._fnSaveState( that.s.dt );
    }, 250 );

    /* Check if the scroll point is outside the trigger boundary which would required
     * a DataTables redraw
     */
    if ( iScrollTop < this.s.redrawTop || iScrollTop > this.s.redrawBottom ) {

                    var preRows = Math.ceil( ((this.s.displayBuffer-1)/2) * this.s.viewportRows );

        if ( Math.abs( iScrollTop - this.s.lastScrollTop ) > heights.viewport || this.s.ani ) {
            iTopRow = parseInt(this._domain( 'physicalToVirtual', iScrollTop ) / heights.row, 10) - preRows;
            this.s.topRowFloat = (this._domain( 'physicalToVirtual', iScrollTop ) / heights.row);
        }
        else {
            iTopRow = this.fnPixelsToRow( iScrollTop - preRows);
            this.s.topRowFloat = this.fnPixelsToRow( iScrollTop, false );
        }

                    /* At the start of the table */
                    if ( iTopRow <= 0 ) {
            iTopRow = 0;
        }

                    /* At the end of the table */
        else if ( iTopRow + this.s.dt._iDisplayLength > this.s.dt.fnRecordsDisplay() ) {
            iTopRow = this.s.dt.fnRecordsDisplay() - this.s.dt._iDisplayLength;
            if ( iTopRow < 0 ) {
                iTopRow = 0;
            }
        }

                    // For the row-striping classes (odd/even) we want only to start
                    // on evens otherwise the stripes will change between draws and
                    // look rubbish
        else if ( iTopRow % 2 !== 0 ) {
            iTopRow++;
        }

                    // (AM) Set level boundary line based on the maximum number of rows
                    // necessary to ensure the minimum of Ajax requests
                    // and also the infinite scrolling behavior at the same time.
                    var levelBoundary = this.s.dt._iDisplayLength - preRows;

                    // (AM) Level changes when boundary line is crossed
                    var level = iTopRow > levelBoundary ? Math.ceil( iTopRow / levelBoundary ) : 1;

                    // (AM) Only request new data when level changes
                    if (level !== this.s.level) {

                            // (AM) Local displayStart definition
                            var displayStart = null;

                            // (AM) Scroll Up/Down Start Position
                            if (level > this.s.level) {
                                displayStart = iTopRow;
                            } else {
                                displayStart = (iTopRow - (this.s.dt._iDisplayLength - preRows));
                                if (displayStart < 0) {
                                    displayStart = 0;
                                }
                            }

                            // (AM) Update Level
                            this.s.level = level;

            /* Cache the new table position for quick lookups */
            this.s.tableTop = $(this.s.dt.nTable).offset().top;
            this.s.tableBottom = $(this.s.dt.nTable).height() + this.s.tableTop;

            var draw =  function () {
                                if ( that.s.scrollDrawReq === null ) {
                                        that.s.scrollDrawReq = iScrollTop;
                                }

                                // (AM) Assign displayStart
                                that.s.dt._iDisplayStart = displayStart;

                                if ( that.s.dt.oApi._fnCalculateEnd ) { // Removed in 1.10
                                        that.s.dt.oApi._fnCalculateEnd( that.s.dt );
                                }
                                that.s.dt.oApi._fnDraw( that.s.dt );
            };

            /* Do the DataTables redraw based on the calculated start point - note that when
             * using server-side processing we introduce a small delay to not DoS the server...
             */
            if ( this.s.dt.oFeatures.bServerSide ) {
                clearTimeout( this.s.drawTO );
                this.s.drawTO = setTimeout( draw, this.s.serverWait );
            }
            else {
                draw();
            }

            if ( this.dom.loader && ! this.s.loaderVisible ) {
                this.dom.loader.css( 'display', 'block' );
                this.s.loaderVisible = true;
            }
        }
    }

    this.s.lastScrollTop = iScrollTop;
    this.s.stateSaveThrottle();
}

Please, add package json for npm install . Thx!

In general child rows in datatables can be much larger (contains more data) than standard rows. This makes DT scroller break somehow. When I open child row which is very high and I scroll down to see the entire rows scroller starts it work and reloads the DT page. I think scroller should be locked in the same position page until all child rows are opened. Any opinions about this?

We've been noticing some real weirdness with using fnScrollToRow sometimes causing it to jump to a completely unexpected row.

Here's it on the example page:

I'll try to find time to dig into this more...

I use the "stateSave = true" option but the scrolling position is not restored after page reload. I also could reproduce the issue on the official demo page (https://datatables.net/extensions/scroller/examples/initialisation/state_saving.html).
Is there a way to make it work?

PS: it worked on the previous version

If change height '.dataTables_scrollBody' then no additional rows appears plugin still thinks like viewport stay the same.

If the table has an overflow a horizontal scrollbar appears for the content (that's ok). But because of the separation of scrollHead and scrollBody, you can just scroll the body so the cols are not in the right allignment any more.

Here is an example: http://jsfiddle.net/9ezfcvyx/3/
Testet in Firefox/IE

The height measurement for the viewport doesn't work correctly if a non-pixel values is given for DataTables' scrollY option (for example give 10em).

See http://datatables.net/forums/discussion/22899 for more.

Currently, version 1.4.3 is available on bower, but not 1.4.4.
And I have bugs with 1.4.3 that I don’t have with 1.4.4.
So please push 1.4.4 version on bower repository.

Hello,

I have an improvement propsal.

Having table with data loaded from server. When user quickly scrolls the table and scrolls out of rendered data, nothing is rendered and thus visible until he stops scrolling for at least "serverWait" milliseconds. This is very uncomfortable. Lowering "serverWait" time to may cause too much pending ajax requests and thus long waing time (for user).

I propose to improve this situation by loading new data and rendering (i.e. calling dt.oApi._fnDraw) immediately after getting outside of trigger boundary, but not before the previous ajax request is finished. Next data are loaded when user scrolls outrside of trigger boundary of newly rendered data.

For that purpose I propose following _fnScroll function.
Added lines begin "++", removed lines begin "--"

    "_fnScroll": function ()
    {
        var
            that = this,
            heights = this.s.heights,
            iScrollTop = this.dom.scroller.scrollTop,
            iTopRow;

        if ( this.s.skip ) {
            return;
        }

        if ( this.s.ingnoreScroll ) {
            return;
        }

        /* If the table has been sorted or filtered, then we use the redraw that
         * DataTables as done, rather than performing our own
         */
        if ( this.s.dt.bFiltered || this.s.dt.bSorted ) {
            this.s.lastScrollTop = 0;
            return;
        }

        /* Update the table's information display for what is now in the viewport */
        this._fnInfo();

        /* We don't want to state save on every scroll event - that's heavy
         * handed, so use a timeout to update the state saving only when the
         * scrolling has finished
         */
        clearTimeout( this.s.stateTO );
        this.s.stateTO = setTimeout( function () {
            that.s.dt.oApi._fnSaveState( that.s.dt );
        }, 250 );

        /* Check if the scroll point is outside the trigger boundary which would required
         * a DataTables redraw
         */
        if ( iScrollTop < this.s.redrawTop || iScrollTop > this.s.redrawBottom ) {
            var preRows = Math.ceil( ((this.s.displayBuffer-1)/2) * this.s.viewportRows );

            if ( Math.abs( iScrollTop - this.s.lastScrollTop ) > heights.viewport || this.s.ani ) {
                iTopRow = parseInt(this._domain( 'physicalToVirtual', iScrollTop ) / heights.row, 10) - preRows;
                this.s.topRowFloat = (this._domain( 'physicalToVirtual', iScrollTop ) / heights.row);
            }
            else {
                iTopRow = this.fnPixelsToRow( iScrollTop ) - preRows;
                this.s.topRowFloat = this.fnPixelsToRow( iScrollTop, false );
            }

            if ( iTopRow <= 0 ) {
                /* At the start of the table */
                iTopRow = 0;
            }
            else if ( iTopRow + this.s.dt._iDisplayLength > this.s.dt.fnRecordsDisplay() ) {
                /* At the end of the table */
                iTopRow = this.s.dt.fnRecordsDisplay() - this.s.dt._iDisplayLength;
                if ( iTopRow < 0 ) {
                    iTopRow = 0;
                }
            }
            else if ( iTopRow % 2 !== 0 ) {
                // For the row-striping classes (odd/even) we want only to start
                // on evens otherwise the stripes will change between draws and
                // look rubbish
                iTopRow++;
            }

            if ( iTopRow != this.s.dt._iDisplayStart ) {
++              // if data are loaded from server
++              if (this.s.dt.oFeatures.bServerSide) {
++                  clearTimeout(this.s.drawTO);
++                  // if most current ajax call loading DataTable data is not finished
++                  if (this.s.dt.jqXHR && this.s.dt.jqXHR.readyState != 4) {
++                      // try again after "serverWait" milliseconds
++                      this.s.drawTO = setTimeout( function () {
++                          that._fnScroll();
++                      }, this.s.serverWait);
++                      return;
++                  }
++              }

                /* Cache the new table position for quick lookups */
                this.s.tableTop = $(this.s.dt.nTable).offset().top;
                this.s.tableBottom = $(this.s.dt.nTable).height() + this.s.tableTop;

                var draw =  function () {
                    if ( that.s.scrollDrawReq === null ) {
                        that.s.scrollDrawReq = iScrollTop;
                    }

                    that.s.dt._iDisplayStart = iTopRow;
                    if ( that.s.dt.oApi._fnCalculateEnd ) { // Removed in 1.10
                        that.s.dt.oApi._fnCalculateEnd( that.s.dt );
                    }
                    that.s.dt.oApi._fnDraw( that.s.dt );
                };

++              /* Do the DataTables redraw based on the calculated start point */
--              /* Do the DataTables redraw based on the calculated start point - note that when
--               * using server-side processing we introduce a small delay to not DoS the server...
--               */
--              if ( this.s.dt.oFeatures.bServerSide ) {
--                  draw();
--                  clearTimeout( this.s.drawTO );
--                  this.s.drawTO = setTimeout( draw, this.s.serverWait );
--              }
--              else {
                    draw();
--              }

                if ( this.dom.loader && ! this.s.loaderVisible ) {
                    this.dom.loader.css( 'display', 'block' );
                    this.s.loaderVisible = true;
                }
            }
        }

        this.s.lastScrollTop = iScrollTop;
        this.s.stateSaveThrottle();
    },

I am using Datatables 1.10.11 with Scroller 1.4.1 and loading the data via server-side processing. Since I want my users to only see rows when they explicitly enter a search query, I am trying to use the deferLoading option. This works fine except when I'm using Scroller. It seems that Scroller triggers a draw of the table on initialisation, which triggers a load of the data on the server.

I made a JsFiddle demonstrating the issue: https://jsfiddle.net/jbrichau/gdLr4vmp/
In the fiddle, you see that the table is immediately filled with data. However, it should only be filled when you hit the reload button.

I also started fiddling around in the Scroller source, and noticed how a call to fnMeasure on init triggers a draw of the table. Changing the code on this line: https://github.com/DataTables/Scroller/blob/master/js/dataTables.scroller.js#L590 to that.fnMeasure(false); fixed my problem. However, I'm unsure of this is the way to go or not.

ps: Also posted this last friday on the forum: https://datatables.net/forums/discussion/33774/datatables-with-scroller-and-server-side-processing-with-deferloading-still-loads-data-on-table-init (not to pressure, but I was not sure if issues like this should be here or on the forum)

Reposted from DataTables/DataTables #854

From @mpryvkin:

There seems to be an issue with Responsive and Scroller extension when scrollCollapse: true option is not used, see this example for demonstration. Responsive extension hides third column even when all content fits the container.

When scrollCollapse: true is added, it works as expected, see this example.

See this discussion on StackOvervflow for more information.

I posted a discussion on datatables forum but this is probably the best place for my problem.

I have the same problem as described in http://datatables.net/forums/discussion/19089/datatables-bautowidth-false-not-working-when-sscrolly-is-set but it's still not working with the nightly build (which was the solution on that discussion). When loading through json/ajax header width is ignored and the columns get resized. You can even see how the column has one width before loading the json data and one after. I've made a fiddle showing the problem, I'd appreciate any help!

http://jsfiddle.net/nmaurer/fa8Lbwxy/

You can see the discussion here: http://datatables.net/forums/discussion/24259/column-swidth-not-working-when-scrolly-is-set-and-json-is-used#latest

Thanks!!!

Unnecessary scrollbar when scrollCollapse is true.
https://jsfiddle.net/EvilKraft/q294y0xz/8/

Repro (this in Chrome 40.0.2214.115 on OS X 10.10.2, but seems to repro elsewhere):

1. Go to https://datatables.net/extensions/scroller/
2. Increase zoom level
3. Reload page
4. Look closely at the headers--they don't align with the content

Seems like a spurious padding-left: 14px is being added?

Hi,
I use Scroller in conjunction with server side processing and scrollCollapse: false to have a fixed table height. When I filter my table and the number of records returned gets small, the loading indicator becomes visible. It seems that it is previously hidden behind the visible rows and is not hidden when the table is finished drawing. with a small number of rows
To solve the issue I use:
$("#myTable .DTS_Loading").show(); when asking the server via ajax and
$("#myTable .DTS_Loading").hide(); in the drawCallback().

Feels a bit hacky though.

The Length Menu does not play well with the Scroller.

I have disabled it with the lengthChange option.

$('#example').dataTable( {
  "lengthChange": false
} );

Just wondering if it should be disabled by default when the Scroller extension is in use.

Anyone have any success using scroller with the mCustomScrollbar plugin? I'm not sure which scroller event to bind to in order to update the page/table record info properly.

Basically, it seems like mCustomScrollbar +scroller work fine together, scroller just doesn't see the scroll event when the custom scroller is initialized, therefore the table record info doesn't update on when scrolling.

If I use tab control in page and the initialize datatables with scroll and not visible, the data.length is NaN on the server side.

line 920 : this.s.heights.row = $('tr', tbody).eq(1).outerHeight();

and this line return 0

and divide by zero

line 409 : this.s.viewportRows = parseInt( heights.viewport / heights.row, 10 )+1;

and return the ajax length to NaN

I've experienced an issue with the scroller switching width of the table for me, especially when there is overflow, between 100% and a calculated value. This happens when I scroll the table. This creates a problem when scrolling as I see differences in how the table and scrollbars display.

Starting at line 487 in the scroller JS, I just added a forced style to make the width 100% of the container for the scroll and touchstart events. This fixed my issue; maybe this will help someone else.

    $(this.dom.scroller).on( 'scroll.DTS', function (e) {
        that._fnScroll.call( that );
        that.dom.scroller.style.width = "100%";
    } );

    /* In iOS we catch the touchstart event in case the user tries to scroll
     * while the display is already scrolling
     */

    $(this.dom.scroller).on('touchstart.DTS', function () {
        that._fnScroll.call( that );
        that.dom.scroller.style.width = "100%";
    } );

When in serverside processing mode, and getting the data from ajax calls, scroller makes multiple requests, where maybe it shouldn't.
Example:
First call has a start: 0 and a length: 30,
The second call the start: 2 and length: 30.

On the first call i get rows from 0 to 30 and on the second i get 2 - 32.
Ajax calls are therefore overlapping, since scroller is requesting rows that it already requested before.
It should make a start: 30 and length: 30 request.

Hi,

If you create a datatable with

• custom columns.width as defined in https://datatables.net/reference/option/columns.width
• serverSide processing (ajax sourced data)

then columns width in dataTables_scrollHeadInner will have the right width,

while columns width in dataTables_scrollBody won't have the same width.

--> This lead to misaligned columns header and contents, and incorrect columns width...

I tried some tricks by copying width from headers columns to body columns but this is quite hard because

• you have to wait for ajax data to be rendered
• when changing order or search, columns width seem to be reset...

Regards.

I've noticed that when _fnInfo gets called post window resize that it uses this.s.heights.viewport which only gets set on startup and is never updated, this leads to iPossibleEnd being incorrect.

As the title suggest, when I use a Client side loading with more than 30K of rows, the scroller only shows a white space.

The trouble is even happening in the production example of datatables (https://datatables.net/extensions/scroller/examples/initialisation/large_js_source.html)

Is there a solution for this?

Greetings