You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

dataTables.scroller.js 47KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244
  1. /*! Scroller 2.0.3
  2. * ©2011-2020 SpryMedia Ltd - datatables.net/license
  3. */
  4. /**
  5. * @summary Scroller
  6. * @description Virtual rendering for DataTables
  7. * @version 2.0.3
  8. * @file dataTables.scroller.js
  9. * @author SpryMedia Ltd (www.sprymedia.co.uk)
  10. * @contact www.sprymedia.co.uk/contact
  11. * @copyright Copyright 2011-2020 SpryMedia Ltd.
  12. *
  13. * This source file is free software, available under the following license:
  14. * MIT license - http://datatables.net/license/mit
  15. *
  16. * This source file is distributed in the hope that it will be useful, but
  17. * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
  18. * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.
  19. *
  20. * For details please refer to: http://www.datatables.net
  21. */
  22. (function (factory) {
  23. if (typeof define === 'function' && define.amd) {
  24. // AMD
  25. define(['jquery', 'datatables.net'], function ($) {
  26. return factory($, window, document);
  27. });
  28. } else if (typeof exports === 'object') {
  29. // CommonJS
  30. module.exports = function (root, $) {
  31. if (!root) {
  32. root = window;
  33. }
  34. if (!$ || !$.fn.dataTable) {
  35. $ = require('datatables.net')(root, $).$;
  36. }
  37. return factory($, root, root.document);
  38. };
  39. } else {
  40. // Browser
  41. factory(jQuery, window, document);
  42. }
  43. }(function ($, window, document, undefined) {
  44. 'use strict';
  45. var DataTable = $.fn.dataTable;
  46. /**
  47. * Scroller is a virtual rendering plug-in for DataTables which allows large
  48. * datasets to be drawn on screen every quickly. What the virtual rendering means
  49. * is that only the visible portion of the table (and a bit to either side to make
  50. * the scrolling smooth) is drawn, while the scrolling container gives the
  51. * visual impression that the whole table is visible. This is done by making use
  52. * of the pagination abilities of DataTables and moving the table around in the
  53. * scrolling container DataTables adds to the page. The scrolling container is
  54. * forced to the height it would be for the full table display using an extra
  55. * element.
  56. *
  57. * Note that rows in the table MUST all be the same height. Information in a cell
  58. * which expands on to multiple lines will cause some odd behaviour in the scrolling.
  59. *
  60. * Scroller is initialised by simply including the letter 'S' in the sDom for the
  61. * table you want to have this feature enabled on. Note that the 'S' must come
  62. * AFTER the 't' parameter in `dom`.
  63. *
  64. * Key features include:
  65. * <ul class="limit_length">
  66. * <li>Speed! The aim of Scroller for DataTables is to make rendering large data sets fast</li>
  67. * <li>Full compatibility with deferred rendering in DataTables for maximum speed</li>
  68. * <li>Display millions of rows</li>
  69. * <li>Integration with state saving in DataTables (scrolling position is saved)</li>
  70. * <li>Easy to use</li>
  71. * </ul>
  72. *
  73. * @class
  74. * @constructor
  75. * @global
  76. * @param {object} dt DataTables settings object or API instance
  77. * @param {object} [opts={}] Configuration object for FixedColumns. Options
  78. * are defined by {@link Scroller.defaults}
  79. *
  80. * @requires jQuery 1.7+
  81. * @requires DataTables 1.10.0+
  82. *
  83. * @example
  84. * $(document).ready(function() {
  85. * $('#example').DataTable( {
  86. * "scrollY": "200px",
  87. * "ajax": "media/dataset/large.txt",
  88. * "scroller": true,
  89. * "deferRender": true
  90. * } );
  91. * } );
  92. */
  93. var Scroller = function (dt, opts) {
  94. /* Sanity check - you just know it will happen */
  95. if (!(this instanceof Scroller)) {
  96. alert("Scroller warning: Scroller must be initialised with the 'new' keyword.");
  97. return;
  98. }
  99. if (opts === undefined) {
  100. opts = {};
  101. }
  102. var dtApi = $.fn.dataTable.Api(dt);
  103. /**
  104. * Settings object which contains customisable information for the Scroller instance
  105. * @namespace
  106. * @private
  107. * @extends Scroller.defaults
  108. */
  109. this.s = {
  110. /**
  111. * DataTables settings object
  112. * @type object
  113. * @default Passed in as first parameter to constructor
  114. */
  115. dt: dtApi.settings()[0],
  116. /**
  117. * DataTables API instance
  118. * @type DataTable.Api
  119. */
  120. dtApi: dtApi,
  121. /**
  122. * Pixel location of the top of the drawn table in the viewport
  123. * @type int
  124. * @default 0
  125. */
  126. tableTop: 0,
  127. /**
  128. * Pixel location of the bottom of the drawn table in the viewport
  129. * @type int
  130. * @default 0
  131. */
  132. tableBottom: 0,
  133. /**
  134. * Pixel location of the boundary for when the next data set should be loaded and drawn
  135. * when scrolling up the way.
  136. * @type int
  137. * @default 0
  138. * @private
  139. */
  140. redrawTop: 0,
  141. /**
  142. * Pixel location of the boundary for when the next data set should be loaded and drawn
  143. * when scrolling down the way. Note that this is actually calculated as the offset from
  144. * the top.
  145. * @type int
  146. * @default 0
  147. * @private
  148. */
  149. redrawBottom: 0,
  150. /**
  151. * Auto row height or not indicator
  152. * @type bool
  153. * @default 0
  154. */
  155. autoHeight: true,
  156. /**
  157. * Number of rows calculated as visible in the visible viewport
  158. * @type int
  159. * @default 0
  160. */
  161. viewportRows: 0,
  162. /**
  163. * setTimeout reference for state saving, used when state saving is enabled in the DataTable
  164. * and when the user scrolls the viewport in order to stop the cookie set taking too much
  165. * CPU!
  166. * @type int
  167. * @default 0
  168. */
  169. stateTO: null,
  170. stateSaveThrottle: function () {
  171. },
  172. /**
  173. * setTimeout reference for the redraw, used when server-side processing is enabled in the
  174. * DataTables in order to prevent DoSing the server
  175. * @type int
  176. * @default null
  177. */
  178. drawTO: null,
  179. heights: {
  180. jump: null,
  181. page: null,
  182. virtual: null,
  183. scroll: null,
  184. /**
  185. * Height of rows in the table
  186. * @type int
  187. * @default 0
  188. */
  189. row: null,
  190. /**
  191. * Pixel height of the viewport
  192. * @type int
  193. * @default 0
  194. */
  195. viewport: null,
  196. labelFactor: 1
  197. },
  198. topRowFloat: 0,
  199. scrollDrawDiff: null,
  200. loaderVisible: false,
  201. forceReposition: false,
  202. baseRowTop: 0,
  203. baseScrollTop: 0,
  204. mousedown: false,
  205. lastScrollTop: 0
  206. };
  207. // @todo The defaults should extend a `c` property and the internal settings
  208. // only held in the `s` property. At the moment they are mixed
  209. this.s = $.extend(this.s, Scroller.oDefaults, opts);
  210. // Workaround for row height being read from height object (see above comment)
  211. this.s.heights.row = this.s.rowHeight;
  212. /**
  213. * DOM elements used by the class instance
  214. * @private
  215. * @namespace
  216. *
  217. */
  218. this.dom = {
  219. "force": document.createElement('div'),
  220. "label": $('<div class="dts_label">0</div>'),
  221. "scroller": null,
  222. "table": null,
  223. "loader": null
  224. };
  225. // Attach the instance to the DataTables instance so it can be accessed in
  226. // future. Don't initialise Scroller twice on the same table
  227. if (this.s.dt.oScroller) {
  228. return;
  229. }
  230. this.s.dt.oScroller = this;
  231. /* Let's do it */
  232. this.construct();
  233. };
  234. $.extend(Scroller.prototype, {
  235. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  236. * Public methods - to be exposed via the DataTables API
  237. */
  238. /**
  239. * Calculate and store information about how many rows are to be displayed
  240. * in the scrolling viewport, based on current dimensions in the browser's
  241. * rendering. This can be particularly useful if the table is initially
  242. * drawn in a hidden element - for example in a tab.
  243. * @param {bool} [redraw=true] Redraw the table automatically after the recalculation, with
  244. * the new dimensions forming the basis for the draw.
  245. * @returns {void}
  246. */
  247. measure: function (redraw) {
  248. if (this.s.autoHeight) {
  249. this._calcRowHeight();
  250. }
  251. var heights = this.s.heights;
  252. if (heights.row) {
  253. heights.viewport = this._parseHeight($(this.dom.scroller).css('max-height'));
  254. this.s.viewportRows = parseInt(heights.viewport / heights.row, 10) + 1;
  255. this.s.dt._iDisplayLength = this.s.viewportRows * this.s.displayBuffer;
  256. }
  257. var label = this.dom.label.outerHeight();
  258. heights.labelFactor = (heights.viewport - label) / heights.scroll;
  259. if (redraw === undefined || redraw) {
  260. this.s.dt.oInstance.fnDraw(false);
  261. }
  262. },
  263. /**
  264. * Get information about current displayed record range. This corresponds to
  265. * the information usually displayed in the "Info" block of the table.
  266. *
  267. * @returns {object} info as an object:
  268. * {
  269. * start: {int}, // the 0-indexed record at the top of the viewport
  270. * end: {int}, // the 0-indexed record at the bottom of the viewport
  271. * }
  272. */
  273. pageInfo: function () {
  274. var
  275. dt = this.s.dt,
  276. iScrollTop = this.dom.scroller.scrollTop,
  277. iTotal = dt.fnRecordsDisplay(),
  278. iPossibleEnd = Math.ceil(this.pixelsToRow(iScrollTop + this.s.heights.viewport, false, this.s.ani));
  279. return {
  280. start: Math.floor(this.pixelsToRow(iScrollTop, false, this.s.ani)),
  281. end: iTotal < iPossibleEnd ? iTotal - 1 : iPossibleEnd - 1
  282. };
  283. },
  284. /**
  285. * Calculate the row number that will be found at the given pixel position
  286. * (y-scroll).
  287. *
  288. * Please note that when the height of the full table exceeds 1 million
  289. * pixels, Scroller switches into a non-linear mode for the scrollbar to fit
  290. * all of the records into a finite area, but this function returns a linear
  291. * value (relative to the last non-linear positioning).
  292. * @param {int} pixels Offset from top to calculate the row number of
  293. * @param {int} [intParse=true] If an integer value should be returned
  294. * @param {int} [virtual=false] Perform the calculations in the virtual domain
  295. * @returns {int} Row index
  296. */
  297. pixelsToRow: function (pixels, intParse, virtual) {
  298. var diff = pixels - this.s.baseScrollTop;
  299. var row = virtual ?
  300. (this._domain('physicalToVirtual', this.s.baseScrollTop) + diff) / this.s.heights.row :
  301. (diff / this.s.heights.row) + this.s.baseRowTop;
  302. return intParse || intParse === undefined ?
  303. parseInt(row, 10) :
  304. row;
  305. },
  306. /**
  307. * Calculate the pixel position from the top of the scrolling container for
  308. * a given row
  309. * @param {int} iRow Row number to calculate the position of
  310. * @returns {int} Pixels
  311. */
  312. rowToPixels: function (rowIdx, intParse, virtual) {
  313. var pixels;
  314. var diff = rowIdx - this.s.baseRowTop;
  315. if (virtual) {
  316. pixels = this._domain('virtualToPhysical', this.s.baseScrollTop);
  317. pixels += diff * this.s.heights.row;
  318. } else {
  319. pixels = this.s.baseScrollTop;
  320. pixels += diff * this.s.heights.row;
  321. }
  322. return intParse || intParse === undefined ?
  323. parseInt(pixels, 10) :
  324. pixels;
  325. },
  326. /**
  327. * Calculate the row number that will be found at the given pixel position (y-scroll)
  328. * @param {int} row Row index to scroll to
  329. * @param {bool} [animate=true] Animate the transition or not
  330. * @returns {void}
  331. */
  332. scrollToRow: function (row, animate) {
  333. var that = this;
  334. var ani = false;
  335. var px = this.rowToPixels(row);
  336. // We need to know if the table will redraw or not before doing the
  337. // scroll. If it will not redraw, then we need to use the currently
  338. // displayed table, and scroll with the physical pixels. Otherwise, we
  339. // need to calculate the table's new position from the virtual
  340. // transform.
  341. var preRows = ((this.s.displayBuffer - 1) / 2) * this.s.viewportRows;
  342. var drawRow = row - preRows;
  343. if (drawRow < 0) {
  344. drawRow = 0;
  345. }
  346. if ((px > this.s.redrawBottom || px < this.s.redrawTop) && this.s.dt._iDisplayStart !== drawRow) {
  347. ani = true;
  348. px = this._domain('virtualToPhysical', row * this.s.heights.row);
  349. // If we need records outside the current draw region, but the new
  350. // scrolling position is inside that (due to the non-linear nature
  351. // for larger numbers of records), we need to force position update.
  352. if (this.s.redrawTop < px && px < this.s.redrawBottom) {
  353. this.s.forceReposition = true;
  354. animate = false;
  355. }
  356. }
  357. if (animate === undefined || animate) {
  358. this.s.ani = ani;
  359. $(this.dom.scroller).animate({
  360. "scrollTop": px
  361. }, function () {
  362. // This needs to happen after the animation has completed and
  363. // the final scroll event fired
  364. setTimeout(function () {
  365. that.s.ani = false;
  366. }, 250);
  367. });
  368. } else {
  369. $(this.dom.scroller).scrollTop(px);
  370. }
  371. },
  372. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  373. * Constructor
  374. */
  375. /**
  376. * Initialisation for Scroller
  377. * @returns {void}
  378. * @private
  379. */
  380. construct: function () {
  381. var that = this;
  382. var dt = this.s.dtApi;
  383. /* Sanity check */
  384. if (!this.s.dt.oFeatures.bPaginate) {
  385. this.s.dt.oApi._fnLog(this.s.dt, 0, 'Pagination must be enabled for Scroller');
  386. return;
  387. }
  388. /* Insert a div element that we can use to force the DT scrolling container to
  389. * the height that would be required if the whole table was being displayed
  390. */
  391. this.dom.force.style.position = "relative";
  392. this.dom.force.style.top = "0px";
  393. this.dom.force.style.left = "0px";
  394. this.dom.force.style.width = "1px";
  395. this.dom.scroller = $('div.' + this.s.dt.oClasses.sScrollBody, this.s.dt.nTableWrapper)[0];
  396. this.dom.scroller.appendChild(this.dom.force);
  397. this.dom.scroller.style.position = "relative";
  398. this.dom.table = $('>table', this.dom.scroller)[0];
  399. this.dom.table.style.position = "absolute";
  400. this.dom.table.style.top = "0px";
  401. this.dom.table.style.left = "0px";
  402. // Add class to 'announce' that we are a Scroller table
  403. $(dt.table().container()).addClass('dts DTS');
  404. // Add a 'loading' indicator
  405. if (this.s.loadingIndicator) {
  406. this.dom.loader = $('<div class="dataTables_processing dts_loading">' + this.s.dt.oLanguage.sLoadingRecords + '</div>')
  407. .css('display', 'none');
  408. $(this.dom.scroller.parentNode)
  409. .css('position', 'relative')
  410. .append(this.dom.loader);
  411. }
  412. this.dom.label.appendTo(this.dom.scroller);
  413. /* Initial size calculations */
  414. if (this.s.heights.row && this.s.heights.row != 'auto') {
  415. this.s.autoHeight = false;
  416. }
  417. // Scrolling callback to see if a page change is needed
  418. this.s.ingnoreScroll = true;
  419. $(this.dom.scroller).on('scroll.dt-scroller', function (e) {
  420. that._scroll.call(that);
  421. });
  422. // In iOS we catch the touchstart event in case the user tries to scroll
  423. // while the display is already scrolling
  424. $(this.dom.scroller).on('touchstart.dt-scroller', function () {
  425. that._scroll.call(that);
  426. });
  427. $(this.dom.scroller)
  428. .on('mousedown.dt-scroller', function () {
  429. that.s.mousedown = true;
  430. })
  431. .on('mouseup.dt-scroller', function () {
  432. that.s.labelVisible = false;
  433. that.s.mousedown = false;
  434. that.dom.label.css('display', 'none');
  435. });
  436. // On resize, update the information element, since the number of rows shown might change
  437. $(window).on('resize.dt-scroller', function () {
  438. that.measure(false);
  439. that._info();
  440. });
  441. // Add a state saving parameter to the DT state saving so we can restore the exact
  442. // position of the scrolling.
  443. var initialStateSave = true;
  444. var loadedState = dt.state.loaded();
  445. dt.on('stateSaveParams.scroller', function (e, settings, data) {
  446. if (initialStateSave && loadedState) {
  447. data.scroller = loadedState.scroller;
  448. initialStateSave = false;
  449. } else {
  450. // Need to used the saved position on init
  451. data.scroller = {
  452. topRow: that.s.topRowFloat,
  453. baseScrollTop: that.s.baseScrollTop,
  454. baseRowTop: that.s.baseRowTop,
  455. scrollTop: that.s.lastScrollTop
  456. };
  457. }
  458. });
  459. if (loadedState && loadedState.scroller) {
  460. this.s.topRowFloat = loadedState.scroller.topRow;
  461. this.s.baseScrollTop = loadedState.scroller.baseScrollTop;
  462. this.s.baseRowTop = loadedState.scroller.baseRowTop;
  463. }
  464. this.measure(false);
  465. that.s.stateSaveThrottle = that.s.dt.oApi._fnThrottle(function () {
  466. that.s.dtApi.state.save();
  467. }, 500);
  468. dt.on('init.scroller', function () {
  469. that.measure(false);
  470. // Setting to `jump` will instruct _draw to calculate the scroll top
  471. // position
  472. that.s.scrollType = 'jump';
  473. that._draw();
  474. // Update the scroller when the DataTable is redrawn
  475. dt.on('draw.scroller', function () {
  476. that._draw();
  477. });
  478. });
  479. // Set height before the draw happens, allowing everything else to update
  480. // on draw complete without worry for roder.
  481. dt.on('preDraw.dt.scroller', function () {
  482. that._scrollForce();
  483. });
  484. // Destructor
  485. dt.on('destroy.scroller', function () {
  486. $(window).off('resize.dt-scroller');
  487. $(that.dom.scroller).off('.dt-scroller');
  488. $(that.s.dt.nTable).off('.scroller');
  489. $(that.s.dt.nTableWrapper).removeClass('DTS');
  490. $('div.DTS_Loading', that.dom.scroller.parentNode).remove();
  491. that.dom.table.style.position = "";
  492. that.dom.table.style.top = "";
  493. that.dom.table.style.left = "";
  494. });
  495. },
  496. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  497. * Private methods
  498. */
  499. /**
  500. * Automatic calculation of table row height. This is just a little tricky here as using
  501. * initialisation DataTables has tale the table out of the document, so we need to create
  502. * a new table and insert it into the document, calculate the row height and then whip the
  503. * table out.
  504. * @returns {void}
  505. * @private
  506. */
  507. _calcRowHeight: function () {
  508. var dt = this.s.dt;
  509. var origTable = dt.nTable;
  510. var nTable = origTable.cloneNode(false);
  511. var tbody = $('<tbody/>').appendTo(nTable);
  512. var container = $(
  513. '<div class="' + dt.oClasses.sWrapper + ' DTS">' +
  514. '<div class="' + dt.oClasses.sScrollWrapper + '">' +
  515. '<div class="' + dt.oClasses.sScrollBody + '"></div>' +
  516. '</div>' +
  517. '</div>'
  518. );
  519. // Want 3 rows in the sizing table so :first-child and :last-child
  520. // CSS styles don't come into play - take the size of the middle row
  521. $('tbody tr:lt(4)', origTable).clone().appendTo(tbody);
  522. var rowsCount = $('tr', tbody).length;
  523. if (rowsCount === 1) {
  524. tbody.prepend('<tr><td>&#160;</td></tr>');
  525. tbody.append('<tr><td>&#160;</td></tr>');
  526. } else {
  527. for (; rowsCount < 3; rowsCount++) {
  528. tbody.append('<tr><td>&#160;</td></tr>');
  529. }
  530. }
  531. $('div.' + dt.oClasses.sScrollBody, container).append(nTable);
  532. // If initialised using `dom`, use the holding element as the insert point
  533. var insertEl = this.s.dt.nHolding || origTable.parentNode;
  534. if (!$(insertEl).is(':visible')) {
  535. insertEl = 'body';
  536. }
  537. // Remove form element links as they might select over others (particularly radio and checkboxes)
  538. container.find("input").removeAttr("name");
  539. container.appendTo(insertEl);
  540. this.s.heights.row = $('tr', tbody).eq(1).outerHeight();
  541. container.remove();
  542. },
  543. /**
  544. * Draw callback function which is fired when the DataTable is redrawn. The main function of
  545. * this method is to position the drawn table correctly the scrolling container for the rows
  546. * that is displays as a result of the scrolling position.
  547. * @returns {void}
  548. * @private
  549. */
  550. _draw: function () {
  551. var
  552. that = this,
  553. heights = this.s.heights,
  554. iScrollTop = this.dom.scroller.scrollTop,
  555. iTableHeight = $(this.s.dt.nTable).height(),
  556. displayStart = this.s.dt._iDisplayStart,
  557. displayLen = this.s.dt._iDisplayLength,
  558. displayEnd = this.s.dt.fnRecordsDisplay();
  559. // Disable the scroll event listener while we are updating the DOM
  560. this.s.skip = true;
  561. // If paging is reset
  562. if ((this.s.dt.bSorted || this.s.dt.bFiltered) && displayStart === 0 && !this.s.dt._drawHold) {
  563. this.s.topRowFloat = 0;
  564. }
  565. iScrollTop = this.s.scrollType === 'jump' ?
  566. this._domain('virtualToPhysical', this.s.topRowFloat * heights.row) :
  567. iScrollTop;
  568. // Store positional information so positional calculations can be based
  569. // upon the current table draw position
  570. this.s.baseScrollTop = iScrollTop;
  571. this.s.baseRowTop = this.s.topRowFloat;
  572. // Position the table in the virtual scroller
  573. var tableTop = iScrollTop - ((this.s.topRowFloat - displayStart) * heights.row);
  574. if (displayStart === 0) {
  575. tableTop = 0;
  576. } else if (displayStart + displayLen >= displayEnd) {
  577. tableTop = heights.scroll - iTableHeight;
  578. }
  579. this.dom.table.style.top = tableTop + 'px';
  580. /* Cache some information for the scroller */
  581. this.s.tableTop = tableTop;
  582. this.s.tableBottom = iTableHeight + this.s.tableTop;
  583. // Calculate the boundaries for where a redraw will be triggered by the
  584. // scroll event listener
  585. var boundaryPx = (iScrollTop - this.s.tableTop) * this.s.boundaryScale;
  586. this.s.redrawTop = iScrollTop - boundaryPx;
  587. this.s.redrawBottom = iScrollTop + boundaryPx > heights.scroll - heights.viewport - heights.row ?
  588. heights.scroll - heights.viewport - heights.row :
  589. iScrollTop + boundaryPx;
  590. this.s.skip = false;
  591. // Restore the scrolling position that was saved by DataTable's state
  592. // saving Note that this is done on the second draw when data is Ajax
  593. // sourced, and the first draw when DOM soured
  594. if (this.s.dt.oFeatures.bStateSave && this.s.dt.oLoadedState !== null &&
  595. typeof this.s.dt.oLoadedState.scroller != 'undefined') {
  596. // A quirk of DataTables is that the draw callback will occur on an
  597. // empty set if Ajax sourced, but not if server-side processing.
  598. var ajaxSourced = (this.s.dt.sAjaxSource || that.s.dt.ajax) && !this.s.dt.oFeatures.bServerSide ?
  599. true :
  600. false;
  601. if ((ajaxSourced && this.s.dt.iDraw == 2) ||
  602. (!ajaxSourced && this.s.dt.iDraw == 1)) {
  603. setTimeout(function () {
  604. $(that.dom.scroller).scrollTop(that.s.dt.oLoadedState.scroller.scrollTop);
  605. // In order to prevent layout thrashing we need another
  606. // small delay
  607. setTimeout(function () {
  608. that.s.ingnoreScroll = false;
  609. }, 0);
  610. }, 0);
  611. }
  612. } else {
  613. that.s.ingnoreScroll = false;
  614. }
  615. // Because of the order of the DT callbacks, the info update will
  616. // take precedence over the one we want here. So a 'thread' break is
  617. // needed. Only add the thread break if bInfo is set
  618. if (this.s.dt.oFeatures.bInfo) {
  619. setTimeout(function () {
  620. that._info.call(that);
  621. }, 0);
  622. }
  623. // Hide the loading indicator
  624. if (this.dom.loader && this.s.loaderVisible) {
  625. this.dom.loader.css('display', 'none');
  626. this.s.loaderVisible = false;
  627. }
  628. },
  629. /**
  630. * Convert from one domain to another. The physical domain is the actual
  631. * pixel count on the screen, while the virtual is if we had browsers which
  632. * had scrolling containers of infinite height (i.e. the absolute value)
  633. *
  634. * @param {string} dir Domain transform direction, `virtualToPhysical` or
  635. * `physicalToVirtual`
  636. * @returns {number} Calculated transform
  637. * @private
  638. */
  639. _domain: function (dir, val) {
  640. var heights = this.s.heights;
  641. var diff;
  642. var magic = 10000; // the point at which the non-linear calculations start to happen
  643. // If the virtual and physical height match, then we use a linear
  644. // transform between the two, allowing the scrollbar to be linear
  645. if (heights.virtual === heights.scroll) {
  646. return val;
  647. }
  648. // In the first 10k pixels and the last 10k pixels, we want the scrolling
  649. // to be linear. After that it can be non-linear. It would be unusual for
  650. // anyone to mouse wheel through that much.
  651. if (val < magic) {
  652. return val;
  653. } else if (dir === 'virtualToPhysical' && val >= heights.virtual - magic) {
  654. diff = heights.virtual - val;
  655. return heights.scroll - diff;
  656. } else if (dir === 'physicalToVirtual' && val >= heights.scroll - magic) {
  657. diff = heights.scroll - val;
  658. return heights.virtual - diff;
  659. }
  660. // Otherwise, we want a non-linear scrollbar to take account of the
  661. // redrawing regions at the start and end of the table, otherwise these
  662. // can stutter badly - on large tables 30px (for example) scroll might
  663. // be hundreds of rows, so the table would be redrawing every few px at
  664. // the start and end. Use a simple linear eq. to stop this, effectively
  665. // causing a kink in the scrolling ratio. It does mean the scrollbar is
  666. // non-linear, but with such massive data sets, the scrollbar is going
  667. // to be a best guess anyway
  668. var m = (heights.virtual - magic - magic) / (heights.scroll - magic - magic);
  669. var c = magic - (m * magic);
  670. return dir === 'virtualToPhysical' ?
  671. (val - c) / m :
  672. (m * val) + c;
  673. },
  674. /**
  675. * Update any information elements that are controlled by the DataTable based on the scrolling
  676. * viewport and what rows are visible in it. This function basically acts in the same way as
  677. * _fnUpdateInfo in DataTables, and effectively replaces that function.
  678. * @returns {void}
  679. * @private
  680. */
  681. _info: function () {
  682. if (!this.s.dt.oFeatures.bInfo) {
  683. return;
  684. }
  685. var
  686. dt = this.s.dt,
  687. language = dt.oLanguage,
  688. iScrollTop = this.dom.scroller.scrollTop,
  689. iStart = Math.floor(this.pixelsToRow(iScrollTop, false, this.s.ani) + 1),
  690. iMax = dt.fnRecordsTotal(),
  691. iTotal = dt.fnRecordsDisplay(),
  692. iPossibleEnd = Math.ceil(this.pixelsToRow(iScrollTop + this.s.heights.viewport, false, this.s.ani)),
  693. iEnd = iTotal < iPossibleEnd ? iTotal : iPossibleEnd,
  694. sStart = dt.fnFormatNumber(iStart),
  695. sEnd = dt.fnFormatNumber(iEnd),
  696. sMax = dt.fnFormatNumber(iMax),
  697. sTotal = dt.fnFormatNumber(iTotal),
  698. sOut;
  699. if (dt.fnRecordsDisplay() === 0 &&
  700. dt.fnRecordsDisplay() == dt.fnRecordsTotal()) {
  701. /* Empty record set */
  702. sOut = language.sInfoEmpty + language.sInfoPostFix;
  703. } else if (dt.fnRecordsDisplay() === 0) {
  704. /* Empty record set after filtering */
  705. sOut = language.sInfoEmpty + ' ' +
  706. language.sInfoFiltered.replace('_MAX_', sMax) +
  707. language.sInfoPostFix;
  708. } else if (dt.fnRecordsDisplay() == dt.fnRecordsTotal()) {
  709. /* Normal record set */
  710. sOut = language.sInfo.replace('_START_', sStart).replace('_END_', sEnd).replace('_MAX_', sMax).replace('_TOTAL_', sTotal) +
  711. language.sInfoPostFix;
  712. } else {
  713. /* Record set after filtering */
  714. sOut = language.sInfo.replace('_START_', sStart).replace('_END_', sEnd).replace('_MAX_', sMax).replace('_TOTAL_', sTotal) + ' ' +
  715. language.sInfoFiltered.replace(
  716. '_MAX_',
  717. dt.fnFormatNumber(dt.fnRecordsTotal())
  718. ) +
  719. language.sInfoPostFix;
  720. }
  721. var callback = language.fnInfoCallback;
  722. if (callback) {
  723. sOut = callback.call(dt.oInstance,
  724. dt, iStart, iEnd, iMax, iTotal, sOut
  725. );
  726. }
  727. var n = dt.aanFeatures.i;
  728. if (typeof n != 'undefined') {
  729. for (var i = 0, iLen = n.length; i < iLen; i++) {
  730. $(n[i]).html(sOut);
  731. }
  732. }
  733. // DT doesn't actually (yet) trigger this event, but it will in future
  734. $(dt.nTable).triggerHandler('info.dt');
  735. },
  736. /**
  737. * Parse CSS height property string as number
  738. *
  739. * An attempt is made to parse the string as a number. Currently supported units are 'px',
  740. * 'vh', and 'rem'. 'em' is partially supported; it works as long as the parent element's
  741. * font size matches the body element. Zero is returned for unrecognized strings.
  742. * @param {string} cssHeight CSS height property string
  743. * @returns {number} height
  744. * @private
  745. */
  746. _parseHeight: function (cssHeight) {
  747. var height;
  748. var matches = /^([+-]?(?:\d+(?:\.\d+)?|\.\d+))(px|em|rem|vh)$/.exec(cssHeight);
  749. if (matches === null) {
  750. return 0;
  751. }
  752. var value = parseFloat(matches[1]);
  753. var unit = matches[2];
  754. if (unit === 'px') {
  755. height = value;
  756. } else if (unit === 'vh') {
  757. height = (value / 100) * $(window).height();
  758. } else if (unit === 'rem') {
  759. height = value * parseFloat($(':root').css('font-size'));
  760. } else if (unit === 'em') {
  761. height = value * parseFloat($('body').css('font-size'));
  762. }
  763. return height ?
  764. height :
  765. 0;
  766. },
  767. /**
  768. * Scrolling function - fired whenever the scrolling position is changed.
  769. * This method needs to use the stored values to see if the table should be
  770. * redrawn as we are moving towards the end of the information that is
  771. * currently drawn or not. If needed, then it will redraw the table based on
  772. * the new position.
  773. * @returns {void}
  774. * @private
  775. */
  776. _scroll: function () {
  777. var
  778. that = this,
  779. heights = this.s.heights,
  780. iScrollTop = this.dom.scroller.scrollTop,
  781. iTopRow;
  782. if (this.s.skip) {
  783. return;
  784. }
  785. if (this.s.ingnoreScroll) {
  786. return;
  787. }
  788. if (iScrollTop === this.s.lastScrollTop) {
  789. return;
  790. }
  791. /* If the table has been sorted or filtered, then we use the redraw that
  792. * DataTables as done, rather than performing our own
  793. */
  794. if (this.s.dt.bFiltered || this.s.dt.bSorted) {
  795. this.s.lastScrollTop = 0;
  796. return;
  797. }
  798. /* Update the table's information display for what is now in the viewport */
  799. this._info();
  800. /* We don't want to state save on every scroll event - that's heavy
  801. * handed, so use a timeout to update the state saving only when the
  802. * scrolling has finished
  803. */
  804. clearTimeout(this.s.stateTO);
  805. this.s.stateTO = setTimeout(function () {
  806. that.s.dtApi.state.save();
  807. }, 250);
  808. this.s.scrollType = Math.abs(iScrollTop - this.s.lastScrollTop) > heights.viewport ?
  809. 'jump' :
  810. 'cont';
  811. this.s.topRowFloat = this.s.scrollType === 'cont' ?
  812. this.pixelsToRow(iScrollTop, false, false) :
  813. this._domain('physicalToVirtual', iScrollTop) / heights.row;
  814. if (this.s.topRowFloat < 0) {
  815. this.s.topRowFloat = 0;
  816. }
  817. /* Check if the scroll point is outside the trigger boundary which would required
  818. * a DataTables redraw
  819. */
  820. if (this.s.forceReposition || iScrollTop < this.s.redrawTop || iScrollTop > this.s.redrawBottom) {
  821. var preRows = Math.ceil(((this.s.displayBuffer - 1) / 2) * this.s.viewportRows);
  822. iTopRow = parseInt(this.s.topRowFloat, 10) - preRows;
  823. this.s.forceReposition = false;
  824. if (iTopRow <= 0) {
  825. /* At the start of the table */
  826. iTopRow = 0;
  827. } else if (iTopRow + this.s.dt._iDisplayLength > this.s.dt.fnRecordsDisplay()) {
  828. /* At the end of the table */
  829. iTopRow = this.s.dt.fnRecordsDisplay() - this.s.dt._iDisplayLength;
  830. if (iTopRow < 0) {
  831. iTopRow = 0;
  832. }
  833. } else if (iTopRow % 2 !== 0) {
  834. // For the row-striping classes (odd/even) we want only to start
  835. // on evens otherwise the stripes will change between draws and
  836. // look rubbish
  837. iTopRow++;
  838. }
  839. // Store calcuated value, in case the following condition is not met, but so
  840. // that the draw function will still use it.
  841. this.s.targetTop = iTopRow;
  842. if (iTopRow != this.s.dt._iDisplayStart) {
  843. /* Cache the new table position for quick lookups */
  844. this.s.tableTop = $(this.s.dt.nTable).offset().top;
  845. this.s.tableBottom = $(this.s.dt.nTable).height() + this.s.tableTop;
  846. var draw = function () {
  847. that.s.dt._iDisplayStart = that.s.targetTop;
  848. that.s.dt.oApi._fnDraw(that.s.dt);
  849. };
  850. /* Do the DataTables redraw based on the calculated start point - note that when
  851. * using server-side processing we introduce a small delay to not DoS the server...
  852. */
  853. if (this.s.dt.oFeatures.bServerSide) {
  854. this.s.forceReposition = true;
  855. clearTimeout(this.s.drawTO);
  856. this.s.drawTO = setTimeout(draw, this.s.serverWait);
  857. } else {
  858. draw();
  859. }
  860. if (this.dom.loader && !this.s.loaderVisible) {
  861. this.dom.loader.css('display', 'block');
  862. this.s.loaderVisible = true;
  863. }
  864. }
  865. } else {
  866. this.s.topRowFloat = this.pixelsToRow(iScrollTop, false, true);
  867. }
  868. this.s.lastScrollTop = iScrollTop;
  869. this.s.stateSaveThrottle();
  870. if (this.s.scrollType === 'jump' && this.s.mousedown) {
  871. this.s.labelVisible = true;
  872. }
  873. if (this.s.labelVisible) {
  874. this.dom.label
  875. .html(this.s.dt.fnFormatNumber(parseInt(this.s.topRowFloat, 10) + 1))
  876. .css('top', iScrollTop + (iScrollTop * heights.labelFactor))
  877. .css('display', 'block');
  878. }
  879. },
  880. /**
  881. * Force the scrolling container to have height beyond that of just the
  882. * table that has been drawn so the user can scroll the whole data set.
  883. *
  884. * Note that if the calculated required scrolling height exceeds a maximum
  885. * value (1 million pixels - hard-coded) the forcing element will be set
  886. * only to that maximum value and virtual / physical domain transforms will
  887. * be used to allow Scroller to display tables of any number of records.
  888. * @returns {void}
  889. * @private
  890. */
  891. _scrollForce: function () {
  892. var heights = this.s.heights;
  893. var max = 1000000;
  894. heights.virtual = heights.row * this.s.dt.fnRecordsDisplay();
  895. heights.scroll = heights.virtual;
  896. if (heights.scroll > max) {
  897. heights.scroll = max;
  898. }
  899. // Minimum height so there is always a row visible (the 'no rows found'
  900. // if reduced to zero filtering)
  901. this.dom.force.style.height = heights.scroll > this.s.heights.row ?
  902. heights.scroll + 'px' :
  903. this.s.heights.row + 'px';
  904. }
  905. });
  906. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  907. * Statics
  908. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
  909. /**
  910. * Scroller default settings for initialisation
  911. * @namespace
  912. * @name Scroller.defaults
  913. * @static
  914. */
  915. Scroller.defaults = {
  916. /**
  917. * Scroller uses the boundary scaling factor to decide when to redraw the table - which it
  918. * typically does before you reach the end of the currently loaded data set (in order to
  919. * allow the data to look continuous to a user scrolling through the data). If given as 0
  920. * then the table will be redrawn whenever the viewport is scrolled, while 1 would not
  921. * redraw the table until the currently loaded data has all been shown. You will want
  922. * something in the middle - the default factor of 0.5 is usually suitable.
  923. * @type float
  924. * @default 0.5
  925. * @static
  926. */
  927. boundaryScale: 0.5,
  928. /**
  929. * The display buffer is what Scroller uses to calculate how many rows it should pre-fetch
  930. * for scrolling. Scroller automatically adjusts DataTables' display length to pre-fetch
  931. * rows that will be shown in "near scrolling" (i.e. just beyond the current display area).
  932. * The value is based upon the number of rows that can be displayed in the viewport (i.e.
  933. * a value of 1), and will apply the display range to records before before and after the
  934. * current viewport - i.e. a factor of 3 will allow Scroller to pre-fetch 1 viewport's worth
  935. * of rows before the current viewport, the current viewport's rows and 1 viewport's worth
  936. * of rows after the current viewport. Adjusting this value can be useful for ensuring
  937. * smooth scrolling based on your data set.
  938. * @type int
  939. * @default 7
  940. * @static
  941. */
  942. displayBuffer: 9,
  943. /**
  944. * Show (or not) the loading element in the background of the table. Note that you should
  945. * include the dataTables.scroller.css file for this to be displayed correctly.
  946. * @type boolean
  947. * @default false
  948. * @static
  949. */
  950. loadingIndicator: false,
  951. /**
  952. * Scroller will attempt to automatically calculate the height of rows for it's internal
  953. * calculations. However the height that is used can be overridden using this parameter.
  954. * @type int|string
  955. * @default auto
  956. * @static
  957. */
  958. rowHeight: "auto",
  959. /**
  960. * When using server-side processing, Scroller will wait a small amount of time to allow
  961. * the scrolling to finish before requesting more data from the server. This prevents
  962. * you from DoSing your own server! The wait time can be configured by this parameter.
  963. * @type int
  964. * @default 200
  965. * @static
  966. */
  967. serverWait: 200
  968. };
  969. Scroller.oDefaults = Scroller.defaults;
  970. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  971. * Constants
  972. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
  973. /**
  974. * Scroller version
  975. * @type String
  976. * @default See code
  977. * @name Scroller.version
  978. * @static
  979. */
  980. Scroller.version = "2.0.3";
  981. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  982. * Initialisation
  983. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
  984. // Attach a listener to the document which listens for DataTables initialisation
  985. // events so we can automatically initialise
  986. $(document).on('preInit.dt.dtscroller', function (e, settings) {
  987. if (e.namespace !== 'dt') {
  988. return;
  989. }
  990. var init = settings.oInit.scroller;
  991. var defaults = DataTable.defaults.scroller;
  992. if (init || defaults) {
  993. var opts = $.extend({}, init, defaults);
  994. if (init !== false) {
  995. new Scroller(settings, opts);
  996. }
  997. }
  998. });
  999. // Attach Scroller to DataTables so it can be accessed as an 'extra'
  1000. $.fn.dataTable.Scroller = Scroller;
  1001. $.fn.DataTable.Scroller = Scroller;
  1002. // DataTables 1.10 API method aliases
  1003. var Api = $.fn.dataTable.Api;
  1004. Api.register('scroller()', function () {
  1005. return this;
  1006. });
  1007. // Undocumented and deprecated - is it actually useful at all?
  1008. Api.register('scroller().rowToPixels()', function (rowIdx, intParse, virtual) {
  1009. var ctx = this.context;
  1010. if (ctx.length && ctx[0].oScroller) {
  1011. return ctx[0].oScroller.rowToPixels(rowIdx, intParse, virtual);
  1012. }
  1013. // undefined
  1014. });
  1015. // Undocumented and deprecated - is it actually useful at all?
  1016. Api.register('scroller().pixelsToRow()', function (pixels, intParse, virtual) {
  1017. var ctx = this.context;
  1018. if (ctx.length && ctx[0].oScroller) {
  1019. return ctx[0].oScroller.pixelsToRow(pixels, intParse, virtual);
  1020. }
  1021. // undefined
  1022. });
  1023. // `scroller().scrollToRow()` is undocumented and deprecated. Use `scroller.toPosition()
  1024. Api.register(['scroller().scrollToRow()', 'scroller.toPosition()'], function (idx, ani) {
  1025. this.iterator('table', function (ctx) {
  1026. if (ctx.oScroller) {
  1027. ctx.oScroller.scrollToRow(idx, ani);
  1028. }
  1029. });
  1030. return this;
  1031. });
  1032. Api.register('row().scrollTo()', function (ani) {
  1033. var that = this;
  1034. this.iterator('row', function (ctx, rowIdx) {
  1035. if (ctx.oScroller) {
  1036. var displayIdx = that
  1037. .rows({order: 'applied', search: 'applied'})
  1038. .indexes()
  1039. .indexOf(rowIdx);
  1040. ctx.oScroller.scrollToRow(displayIdx, ani);
  1041. }
  1042. });
  1043. return this;
  1044. });
  1045. Api.register('scroller.measure()', function (redraw) {
  1046. this.iterator('table', function (ctx) {
  1047. if (ctx.oScroller) {
  1048. ctx.oScroller.measure(redraw);
  1049. }
  1050. });
  1051. return this;
  1052. });
  1053. Api.register('scroller.page()', function () {
  1054. var ctx = this.context;
  1055. if (ctx.length && ctx[0].oScroller) {
  1056. return ctx[0].oScroller.pageInfo();
  1057. }
  1058. // undefined
  1059. });
  1060. return Scroller;
  1061. }));