123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337 |
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <html>
- <head>
- <meta http-equiv="Content-type" content="text/html; charset=utf-8">
- <title>Class: Scroller - documentation</title>
-
- <style type="text/css" media="screen">
- @import "media/css/doc.css";
- @import "media/css/shCore.css";
- @import "media/css/shThemeDataTables.css";
- </style>
-
- <script type="text/javascript" src="media/js/shCore.js"></script>
- <script type="text/javascript" src="media/js/shBrushJScript.js"></script>
- <script type="text/javascript" src="media/js/jquery.js"></script>
- <script type="text/javascript" src="media/js/doc.js"></script>
- </head>
- <body>
- <div class="fw_container">
-
- <a name="top"></a>
- <div class="fw_header">
- <h1 class="page-title">Class: Scroller</h1>
-
- <div class="page-info">
- Scroller v1.1.0 documentation
- </div>
- </div>
-
- <div class="fw_nav">
- <h2>Navigation</h2>
- <ul>
- <li><a href="#top">Overview</a></li>
- <li><a href="#summary">Summary</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Classes (0)</td><td><a href="#summary_namespaces">Namespaces (3)</a></td></tr><tr><td><a href="#summary_properties">Properties (1)</a></td><td><a href="#summary_properties_static">Static properties (1)</a></td></tr><tr><td><a href="#summary_methods">Methods (4)</a></td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li><li><a href="#details">Details</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td><a href="#summary_properties">Properties (1)</a></td><td><a href="#summary_properties_static">Static properties (1)</a></td></tr><tr><td><a href="#summary_methods">Methods (4)</a></td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li></ul>
- <div style="margin-top: 10px;">
- <input type="hidden" name="show_private" value="0">
- <span id="private_label">Hiding</span> private elements
- (<a id="private_toggle" href="">toggle</a>)
- </span>
- </div>
- <div>
- <input type="hidden" name="show_extended" value="1">
- <span id="extended_label">Showing</span> extended elements
- (<a id="extended_toggle" href="">toggle</a>)
- </span>
- </div>
- </div>
- <div class="fw_content">
- <a name="overview"></a>
- <div class="doc_overview">
- <div class="nav_blocker"></div>
- <dl><dt id="Scroller" class=" even"><a name="Scroller"></a><a name="Scroller_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>new Scroller</a></span><span class="type-sig"><span class="signature">(oDT, <span class="optional">oOpts</span>)</span><span class="type-signature"></span></span></span></dt><dd class=" even"><p>Scroller is a virtual rendering plug-in for DataTables which allows large
- datasets to be drawn on screen every quickly. What the virtual rendering means
- is that only the visible portion of the table (and a bit to either side to make
- the scrolling smooth) is drawn, while the scrolling container gives the
- visual impression that the whole table is visible. This is done by making use
- of the pagination abilities of DataTables and moving the table around in the
- scrolling container DataTables adds to the page. The scrolling container is
- forced to the height it would be for the full table display using an extra
- element. </p>
- <p>Note that rows in the table MUST all be the same height. Information in a cell
- which expands on to multiple lines will cause some odd behaviour in the scrolling.</p>
- <p>Scroller is initialised by simply including the letter 'S' in the sDom for the
- table you want to have this feature enabled on. Note that the 'S' must come
- AFTER the 't' parameter in sDom.</p>
- <p>Key features include:
- <ul class="limit_length">
- <li>Speed! The aim of Scroller for DataTables is to make rendering large data sets fast</li>
- <li>Full compatibility with deferred rendering in DataTables 1.9 for maximum speed</li>
- <li>Correct visual scrolling implementation, similar to "infinite scrolling" in DataTable core</li>
- <li>Integration with state saving in DataTables (scrolling position is saved)</li>
- <li>Easy to use</li>
- </ul></p><div class="collapse_details"><h3>Constructor</h3><dl class="details">
-
- </dl>
- <h5>Parameters:</h5>
- <table class="params">
- <thead>
- <tr>
- <th width="20"></th>
- <th width="12%" class="bottom_border name">Name</th>
- <th width="10%" class="bottom_border">Type</th>
- <th width="10%" class="bottom_border">Attributes</th>
- <th width="10%" class="bottom_border">Default</th>
- <th class="last bottom_border">Description</th>
- </tr>
- </thead>
-
- <tbody>
- <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">oDT</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>DataTables settings object</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">oOpts</td><td class="type type-param">object</td><td class="attributes">Optional</td><td class="default">{}</td><td class="description last"><p>Configuration object for FixedColumns. Options are defined by <a href="Scroller.oDefaults.html">Scroller.oDefaults</a></p></td></tr>
- </tbody>
- </table><h5>Example:</h5>
- <div class="example-code">
- <pre class="brush: js"> $(document).ready(function() {
- $('#example').dataTable( {
- "sScrollY": "200px",
- "sAjaxSource": "media/dataset/large.txt",
- "sDom": "frtiS",
- "bDeferRender": true
- } );
- } );</pre>
- </div>
- </div>
- </dl><h3 class="subsection-title">Requires</h3>
- <ul>
- <li>module:jQuery</li><li>module:DataTables</li>
- </ul>
- </div>
-
- <div class="doc_summary">
- <a name="summary"></a>
- <h2>Summary</h2>
- <div class="doc_group"><a name="summary_namespaces"></a><h3 class="subsection-title">Namespaces</h3>
- <dl>
- <dt class="even"><span class="type-name"><a href="c6053fac6b.html">dom</a></span></dt><dd class="even"><p>DOM elements used by the class instance</p></dd><dt class="odd"><span class="type-name"><a href="Scroller.oDefaults.html">oDefaults</a></span></dt><dd class="odd"><p>Scroller default settings for initialisation</p></dd><dt class="even"><span class="type-name"><a href="baed189d4a.html">s</a></span></dt><dd class="even"><p>Settings object which contains customisable information for the Scroller instance</p></dd>
- </dl></div><div class="doc_group"><a name="summary_properties"></a><h3 class="subsection-title">Properties - instance</h3>
- <dl>
- <dt class=" even"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#CLASS">CLASS</a></span><span class="type-sig"><span class="type-signature"> :String</span></span></dt><dd class=" even"><p>Name of this class</p></dd>
- </dl></div><div class="doc_group"><a name="summary_properties_static"></a><h3 class="subsection-title">Properties - static</h3>
- <dl>
- <dt class=" even"><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#VERSION">VERSION</a></span><span class="type-sig"><span class="type-signature"> :String</span></span></dt><dd class=" even"><p>Scroller version</p></dd>
- </dl></div><div class="doc_group"><a name="summary_methods"></a><h3 class="subsection-title">Methods - instance</h3>
- <dl>
- <dt class=" even"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#fnMeasure">fnMeasure</a></span><span class="type-sig"><span class="signature">(<span class="optional">bRedraw</span>)</span><span class="type-signature"> → {void}</span></span></dt><dd class=" even"><p>Calculate and store information about how many rows are to be displayed in the scrolling
- viewport, based on current dimensions in the browser's rendering. This can be particularly
- useful if the table is initially drawn in a hidden element - for example in a tab.</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#fnPixelsToRow">fnPixelsToRow</a></span><span class="type-sig"><span class="signature">(iPixels)</span><span class="type-signature"> → {int}</span></span></dt><dd class=" odd"><p>Calculate the row number that will be found at the given pixel position (y-scroll)</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#fnRowToPixels">fnRowToPixels</a></span><span class="type-sig"><span class="signature">(iRow)</span><span class="type-signature"> → {int}</span></span></dt><dd class=" even"><p>Calculate the pixel position from the top of the scrolling container for a given row</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#fnScrollToRow">fnScrollToRow</a></span><span class="type-sig"><span class="signature">(iRow, <span class="optional">bAnimate</span>)</span><span class="type-signature"> → {void}</span></span></dt><dd class=" odd"><p>Calculate the row number that will be found at the given pixel position (y-scroll)</p></dd>
- </dl>
- </div>
- </div>
-
-
- <div class="doc_details">
- <a name="details"></a>
- <h2>Details</h2>
- <div class="doc_group"><a name="details_properties"></a><h3 class="subsection-title">Properties - instance</h3>
- <dl>
- <dt class=" even"><a name="CLASS"></a><a name="CLASS_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#CLASS">CLASS</a></span><span class="type-sig"><span class="type-signature"> :String</span></span></dt><dd class=" even"><p>Name of this class</p><div class="collapse_details"><dl class="details">
-
- </dl>
- </div></dd>
- </dl></div><div class="doc_group"><a name="details_properties"></a><h3 class="subsection-title">Properties - static</h3>
- <dl>
- <dt class=" even"><a name="VERSION"></a><a name="VERSION_details"></a><span class="type-attr"><span class="type-signature"><static> </span></span><span class="type-name"><a href="#VERSION">VERSION</a></span><span class="type-sig"><span class="type-signature"> :String</span></span></dt><dd class=" even"><p>Scroller version</p><div class="collapse_details"><dl class="details">
-
- </dl>
- </div></dd>
- </dl></div><div class="doc_group"><a name="details_methods"></a><h3 class="subsection-title">Methods - instance</h3>
- <dl>
- <dt id="Scroller#fnMeasure" class=" even"><a name="fnMeasure"></a><a name="fnMeasure_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>fnMeasure</a></span><span class="type-sig"><span class="signature">(<span class="optional">bRedraw</span>)</span><span class="type-signature"> → {void}</span></span></span></dt><dd class=" even"><p>Calculate and store information about how many rows are to be displayed in the scrolling
- viewport, based on current dimensions in the browser's rendering. This can be particularly
- useful if the table is initially drawn in a hidden element - for example in a tab.</p><div class="collapse_details"><dl class="details">
-
- </dl>
- <h5>Parameters:</h5>
- <table class="params">
- <thead>
- <tr>
- <th width="20"></th>
- <th width="12%" class="bottom_border name">Name</th>
- <th width="10%" class="bottom_border">Type</th>
- <th width="10%" class="bottom_border">Attributes</th>
- <th width="10%" class="bottom_border">Default</th>
- <th class="last bottom_border">Description</th>
- </tr>
- </thead>
-
- <tbody>
- <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">bRedraw</td><td class="type type-param">bool</td><td class="attributes">Optional</td><td class="default">true</td><td class="description last"><p>Redraw the table automatically after the recalculation, with
- the new dimentions forming the basis for the draw.</p></td></tr>
- </tbody>
- </table><h5>Example:</h5>
- <div class="example-code">
- <pre class="brush: js"> $(document).ready(function() {
- // Make the example container hidden to throw off the browser's sizing
- document.getElementById('container').style.display = "none";
- var oTable = $('#example').dataTable( {
- "sScrollY": "200px",
- "sAjaxSource": "media/dataset/large.txt",
- "sDom": "frtiS",
- "bDeferRender": true,
- "fnInitComplete": function (o) {
- // Immediately scroll to row 1000
- o.oScroller.fnScrollToRow( 1000 );
- }
- } );
-
- setTimeout( function () {
- // Make the example container visible and recalculate the scroller sizes
- document.getElementById('container').style.display = "block";
- oTable.fnSettings().oScroller.fnMeasure();
- }, 3000 );</pre>
- </div>
- </div>
- <dt id="Scroller#fnPixelsToRow" class=" odd"><a name="fnPixelsToRow"></a><a name="fnPixelsToRow_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>fnPixelsToRow</a></span><span class="type-sig"><span class="signature">(iPixels)</span><span class="type-signature"> → {int}</span></span></span></dt><dd class=" odd"><p>Calculate the row number that will be found at the given pixel position (y-scroll)</p><div class="collapse_details"><dl class="details">
-
- </dl>
- <h5>Parameters:</h5>
- <table class="params">
- <thead>
- <tr>
- <th width="20"></th>
- <th width="12%" class="bottom_border name">Name</th>
- <th width="10%" class="bottom_border">Type</th>
- <th width="10%" class="bottom_border">Attributes</th>
- <th width="10%" class="bottom_border">Default</th>
- <th class="last bottom_border">Description</th>
- </tr>
- </thead>
-
- <tbody>
- <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">iPixels</td><td class="type type-param">int</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Offset from top to caluclate the row number of</p></td></tr>
- </tbody>
- </table><h5>Returns:</h5><p class="returns"><p>Row index</p></p><h5>Example:</h5>
- <div class="example-code">
- <pre class="brush: js"> $(document).ready(function() {
- $('#example').dataTable( {
- "sScrollY": "200px",
- "sAjaxSource": "media/dataset/large.txt",
- "sDom": "frtiS",
- "bDeferRender": true,
- "fnInitComplete": function (o) {
- // Find what row number is at 500px
- alert( o.oScroller.fnPixelsToRow( 500 ) );
- }
- } );
- } );</pre>
- </div>
- </div>
- <dt id="Scroller#fnRowToPixels" class=" even"><a name="fnRowToPixels"></a><a name="fnRowToPixels_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>fnRowToPixels</a></span><span class="type-sig"><span class="signature">(iRow)</span><span class="type-signature"> → {int}</span></span></span></dt><dd class=" even"><p>Calculate the pixel position from the top of the scrolling container for a given row</p><div class="collapse_details"><dl class="details">
-
- </dl>
- <h5>Parameters:</h5>
- <table class="params">
- <thead>
- <tr>
- <th width="20"></th>
- <th width="12%" class="bottom_border name">Name</th>
- <th width="10%" class="bottom_border">Type</th>
- <th width="10%" class="bottom_border">Attributes</th>
- <th width="10%" class="bottom_border">Default</th>
- <th class="last bottom_border">Description</th>
- </tr>
- </thead>
-
- <tbody>
- <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">iRow</td><td class="type type-param">int</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Row number to calculate the position of</p></td></tr>
- </tbody>
- </table><h5>Returns:</h5><p class="returns"><p>Pixels</p></p><h5>Example:</h5>
- <div class="example-code">
- <pre class="brush: js"> $(document).ready(function() {
- $('#example').dataTable( {
- "sScrollY": "200px",
- "sAjaxSource": "media/dataset/large.txt",
- "sDom": "frtiS",
- "bDeferRender": true,
- "fnInitComplete": function (o) {
- // Find where row 25 is
- alert( o.oScroller.fnRowToPixels( 25 ) );
- }
- } );
- } );</pre>
- </div>
- </div>
- <dt id="Scroller#fnScrollToRow" class=" odd"><a name="fnScrollToRow"></a><a name="fnScrollToRow_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>fnScrollToRow</a></span><span class="type-sig"><span class="signature">(iRow, <span class="optional">bAnimate</span>)</span><span class="type-signature"> → {void}</span></span></span></dt><dd class=" odd"><p>Calculate the row number that will be found at the given pixel position (y-scroll)</p><div class="collapse_details"><dl class="details">
-
- </dl>
- <h5>Parameters:</h5>
- <table class="params">
- <thead>
- <tr>
- <th width="20"></th>
- <th width="12%" class="bottom_border name">Name</th>
- <th width="10%" class="bottom_border">Type</th>
- <th width="10%" class="bottom_border">Attributes</th>
- <th width="10%" class="bottom_border">Default</th>
- <th class="last bottom_border">Description</th>
- </tr>
- </thead>
-
- <tbody>
- <tr class="even"><td class="number right_border"><div>1</div></td><td class="name">iRow</td><td class="type type-param">int</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Row index to scroll to</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">bAnimate</td><td class="type type-param">bool</td><td class="attributes">Optional</td><td class="default">true</td><td class="description last"><p>Animate the transision or not</p></td></tr>
- </tbody>
- </table><h5>Example:</h5>
- <div class="example-code">
- <pre class="brush: js"> $(document).ready(function() {
- $('#example').dataTable( {
- "sScrollY": "200px",
- "sAjaxSource": "media/dataset/large.txt",
- "sDom": "frtiS",
- "bDeferRender": true,
- "fnInitComplete": function (o) {
- // Immediately scroll to row 1000
- o.oScroller.fnScrollToRow( 1000 );
- }
- } );
-
- // Sometime later on use the following to scroll to row 500...
- var oSettings = $('#example').dataTable().fnSettings();
- oSettings.oScroller.fnScrollToRow( 500 );
- } );</pre>
- </div>
- </div>
- </dd>
- </div>
- </div>
-
- </div>
- <div class="fw_footer">
- Scroller: Copyright 2011-2012 Allan Jardine, all rights reserved<br>
- Documentation generated by <a href="https://github.com/micmath/JSDoc">JSDoc 3</a> on
- 23th Sep 2012 - 14:28
- with the <a href="http://datatables.net/">DataTables</a> template.
- </div>
- </body>
- </html>
|