datatables / scroller Goto Github PK
View Code? Open in Web Editor NEWVirtual scrolling plug-in for DataTables
Home Page: http://www.datatables.net/
License: Other
Virtual scrolling plug-in for DataTables
Home Page: http://www.datatables.net/
License: Other
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.
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?
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.
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.
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
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
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.
Unnecessary scrollbar when scrollCollapse is true.
https://jsfiddle.net/EvilKraft/q294y0xz/8/
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
:
0-20
0-49
<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:
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.
As per the discussion in http://datatables.net/forums/discussion/18761/ - Scroller should be using the dynamic class names.
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/scroller/1.4.3/js/dataTables.scroller.min.js"></script>
</head>
<body style="overflow:hidden;">
ID | First name | Last name | ZIP / Post code | Country |
---|
$(document).ready(function() {
var data = [];
for ( var i=0 ; i<50000 ; i++ ) {
data.push( [ 0, i, i, i, i ] );
}
$('#example').DataTable( {
data: data,
deferRender: true,
scrollY: 200,
scrollCollapse: true,
scroller: true,
"drawCallback": function() {
this.api().column(0).nodes().each(function(cell, i) {
cell.innerHTML = i + 1;
});
},
} );
} );
</script>
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)
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
Repro (this in Chrome 40.0.2214.115 on OS X 10.10.2, but seems to repro elsewhere):
Seems like a spurious padding-left: 14px
is being added?
As per the title!
If change height '.dataTables_scrollBody' then no additional rows appears plugin still thinks like viewport stay the same.
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.
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.
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.
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.
Hi,
It may be useful to include the composer.json file to install with composer fron packagist, like DataTables/DataTables.
thanks
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;
}
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 "..".
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%";
} );
Repro:
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.
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!
Please, add package json for npm install . Thx!
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!!!
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.
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.
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
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
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
Regards.
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
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();
},
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.
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?
Hi guys, is it possible to add also this fix in future version? (maybe in 1.0.3 version :)
Many Thanks.
Please add a license
key to bower.json
. It's required by some deployment tools, like webjars.
And thanks for this great library!
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.
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):
/**
"_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();
}
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!
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 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
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
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.