Mercurial > repos > saskia-hiltemann > ireport_dev
comparison DataTables-1.9.4/extras/Scroller/api_scrolling.html @ 0:c73753f1606f draft
Uploaded
| author | saskia-hiltemann |
|---|---|
| date | Mon, 06 Oct 2014 08:13:54 -0400 |
| parents | |
| children |
comparison
equal
deleted
inserted
replaced
| -1:000000000000 | 0:c73753f1606f |
|---|---|
| 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> | |
| 2 <html> | |
| 3 <head> | |
| 4 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | |
| 5 <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" /> | |
| 6 | |
| 7 <title>DataTables example</title> | |
| 8 <style type="text/css"> | |
| 9 @import "../../media/css/demo_page.css"; | |
| 10 @import "../../media/css/demo_table.css"; | |
| 11 @import "media/css/dataTables.scroller.css"; | |
| 12 </style> | |
| 13 <script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script> | |
| 14 <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> | |
| 15 <script type="text/javascript" language="javascript" src="media/js/dataTables.scroller.js"></script> | |
| 16 <script type="text/javascript" charset="utf-8"> | |
| 17 $(document).ready(function() { | |
| 18 $('#example').dataTable( { | |
| 19 "sScrollY": "200px", | |
| 20 "sAjaxSource": "media/data/2500.txt", | |
| 21 "sDom": "frtiS", | |
| 22 "bDeferRender": true, | |
| 23 "fnInitComplete": function () { | |
| 24 this.fnSettings().oScroller.fnScrollToRow( 1000 ); | |
| 25 } | |
| 26 } ); | |
| 27 } ); | |
| 28 </script> | |
| 29 </head> | |
| 30 <body id="dt_example"> | |
| 31 <div id="container" style="width:980px"> | |
| 32 <div class="full_width big"> | |
| 33 Scroller API example | |
| 34 </div> | |
| 35 | |
| 36 <h1>Preamble</h1> | |
| 37 <p>This example shows a trivial use of the Scroller API to scroll the table to row 1000 once the table has been loaded. Any number could be used here, and a small animated effect is used to provide visual feedback to the user (this can be disabled by passed false as a second parameter to fnScrollToRow).</p> | |
| 38 | |
| 39 <h1>Live example</h1> | |
| 40 <div id="demo"> | |
| 41 <table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> | |
| 42 <thead> | |
| 43 <tr> | |
| 44 <th>ID</th> | |
| 45 <th>First name</th> | |
| 46 <th>Last name</th> | |
| 47 <th>ZIP</th> | |
| 48 <th width="33%">Country</th> | |
| 49 </tr> | |
| 50 </thead> | |
| 51 </table> | |
| 52 </div> | |
| 53 <div class="spacer"></div> | |
| 54 | |
| 55 | |
| 56 <h1>Initialisation code</h1> | |
| 57 <pre>$(document).ready(function() { | |
| 58 $('#example').dataTable( { | |
| 59 "sScrollY": "200px", | |
| 60 "sAjaxSource": "media/data/2500.txt", | |
| 61 "sDom": "frtiS", | |
| 62 "bDeferRender": true, | |
| 63 "fnInitComplete": function () { | |
| 64 this.fnSettings().oScroller.fnScrollToRow( 1000 ); | |
| 65 } | |
| 66 } ); | |
| 67 } );</pre> | |
| 68 | |
| 69 | |
| 70 <h1>Other examples</h1> | |
| 71 <div class="demo_links"> | |
| 72 <ul> | |
| 73 <li><a href="index.html">Basic initialisation of Scroller</a></li> | |
| 74 <li><a href="state_saving.html">State saving</a></li> | |
| 75 <li><a href="api_scrolling.html">API - pragmatically move to a row</a></li> | |
| 76 <li><a href="server-side_processing.html">Server-side processing with Scroller</a></li> | |
| 77 <li><a href="large_js_source.html">50'000 rows in a table - client-side generated data</a></li> | |
| 78 </ul> | |
| 79 </div> | |
| 80 | |
| 81 </div> | |
| 82 </body> | |
| 83 </html> |