Skip to content
Permalink
Browse files

New: Label for the row number to be displayed when using the mouse to…

… click and drag the scrollbar. This can provide a quick overview to the target point when you need to scroll large data sets. This is only really useful for tens of thousands or more rows.
  • Loading branch information...
Allan Jardine
Allan Jardine committed Jul 30, 2018
1 parent 58f0bbc commit 86ffc8d9d41c65ecaaf9398b335bf6826c782301
Showing with 39 additions and 3 deletions.
  1. +13 −0 css/scroller.dataTables.scss
  2. +26 −3 js/dataTables.scroller.js
@@ -13,6 +13,19 @@ div.DTS {
z-index: 1;
}

div.dts_label {
position: absolute;
right: 10px;
background: rgba(0, 0, 0, 0.8);
color: white;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
text-align: right;
border-radius: 3px;
padding: 0.4em;
z-index: 2;
display: none;
}

div.dataTables_scrollBody {
background: repeating-linear-gradient(
45deg,
@@ -213,15 +213,17 @@ var Scroller = function ( dt, opts ) {
* @type int
* @default 0
*/
viewport: null
viewport: null,
labelFactor: 1
},

topRowFloat: 0,
scrollDrawDiff: null,
loaderVisible: false,
forceReposition: false,
baseRowTop: 0,
baseScrollTop: 0
baseScrollTop: 0,
mousedown: false
};

// @todo The defaults should extend a `c` property and the internal settings
@@ -239,6 +241,7 @@ var Scroller = function ( dt, opts ) {
*/
this.dom = {
"force": document.createElement('div'),
"label": $('<div class="dts_label">0</div>'),
"scroller": null,
"table": null,
"loader": null
@@ -466,6 +469,9 @@ $.extend( Scroller.prototype, {
this.s.dt._iDisplayLength = this.s.viewportRows * this.s.displayBuffer;
}

var label = this.dom.label.outerHeight();
heights.labelFactor = (heights.viewport-label) / heights.scroll;

if ( bRedraw === undefined || bRedraw )
{
this.s.dt.oInstance.fnDraw( false );
@@ -549,6 +555,8 @@ $.extend( Scroller.prototype, {
.append( this.dom.loader );
}

this.dom.label.appendTo(this.dom.scroller);

/* Initial size calculations */
if ( this.s.heights.row && this.s.heights.row != 'auto' )
{
@@ -573,6 +581,15 @@ $.extend( Scroller.prototype, {
that._fnScroll.call( that );
} );

$(this.dom.scroller)
.on('mousedown', function () {
that.s.mousedown = true;
})
.on('mouseup', function () {
that.s.mouseup = false;
that.dom.label.css('display', 'none');
});

// On resize, update the information element, since the number of rows shown might change
$(window).on( 'resize.dt-scroller', function () {
that.fnMeasure( false );
@@ -703,7 +720,6 @@ $.extend( Scroller.prototype, {
* a DataTables redraw
*/
if ( this.s.forceReposition || iScrollTop < this.s.redrawTop || iScrollTop > this.s.redrawBottom ) {

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

iTopRow = parseInt(this.s.topRowFloat, 10) - preRows;
@@ -765,6 +781,13 @@ $.extend( Scroller.prototype, {

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

if ( this.s.scrollType === 'jump' && this.s.mousedown ) {
this.dom.label
.html( this.s.dt.fnFormatNumber( parseInt( this.s.topRowFloat, 10 )+1 ) )
.css( 'top', iScrollTop + (iScrollTop * heights.labelFactor ) )
.css( 'display', 'block' );
}
},


0 comments on commit 86ffc8d

Please sign in to comment.
You can’t perform that action at this time.