Mercurial > repos > saskia-hiltemann > ireport
comparison DataTables-1.9.4/extras/Scroller/large_js_source.html @ 0:ac5f9272033b draft
first upload
| author | saskia-hiltemann |
|---|---|
| date | Tue, 01 Jul 2014 11:42:23 -0400 |
| parents | |
| children |
comparison
equal
deleted
inserted
replaced
| -1:000000000000 | 0:ac5f9272033b |
|---|---|
| 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 var aaData = []; | |
| 19 for ( var i=0 ; i<50000 ; i++ ) { | |
| 20 aaData.push( [ i, i, i, i, i ] ); | |
| 21 } | |
| 22 | |
| 23 var oTable = $('#example').dataTable( { | |
| 24 "sScrollY": "200px", | |
| 25 "aaData": aaData, | |
| 26 "sDom": "frtiS", | |
| 27 "bDeferRender": true | |
| 28 } ); | |
| 29 } ); | |
| 30 </script> | |
| 31 </head> | |
| 32 <body id="dt_example"> | |
| 33 <div id="container" style="width:980px"> | |
| 34 <div class="full_width big"> | |
| 35 Scroller example - 50'000 rows | |
| 36 </div> | |
| 37 | |
| 38 <h1>Preamble</h1> | |
| 39 <p>This example is completely artificial in that the data generated is created on the client-side by just looping around a Javascript array and then passing that to DataTables. However, it does show quite nicely that DataTables and Scroller can cope with large amounts of data on the client-side quite nicely. Typically data such as this would be Ajax sourced and server-side processing should be considered. Please be aware that the performance of this page will depend on your browser - for example IE6 will crawl!</p> | |
| 40 | |
| 41 <h1>Live example</h1> | |
| 42 <div id="demo"> | |
| 43 <table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> | |
| 44 <thead> | |
| 45 <tr> | |
| 46 <th>Column 1</th> | |
| 47 <th>Column 2</th> | |
| 48 <th>Column 3</th> | |
| 49 <th>Column 4</th> | |
| 50 <th>Column 5</th> | |
| 51 </tr> | |
| 52 </thead> | |
| 53 </table> | |
| 54 </div> | |
| 55 <div class="spacer"></div> | |
| 56 | |
| 57 | |
| 58 <h1>Initialisation code</h1> | |
| 59 <pre>$(document).ready(function() { | |
| 60 var aaData = []; | |
| 61 for ( var i=1 ; i<50000 ; i++ ) { | |
| 62 aaData.push( [ i, i, i, i, i ] ); | |
| 63 } | |
| 64 | |
| 65 var oTable = $('#example').dataTable( { | |
| 66 "sScrollY": "200px", | |
| 67 "aaData": aaData, | |
| 68 "sDom": "frtiS", | |
| 69 "bDeferRender": true | |
| 70 } ); | |
| 71 } );</pre> | |
| 72 | |
| 73 | |
| 74 <h1>Other examples</h1> | |
| 75 <div class="demo_links"> | |
| 76 <ul> | |
| 77 <li><a href="index.html">Basic initialisation of Scroller</a></li> | |
| 78 <li><a href="state_saving.html">State saving</a></li> | |
| 79 <li><a href="api_scrolling.html">API - pragmatically move to a row</a></li> | |
| 80 <li><a href="server-side_processing.html">Server-side processing with Scroller</a></li> | |
| 81 <li><a href="large_js_source.html">50'000 rows in a table - client-side generated data</a></li> | |
| 82 </ul> | |
| 83 </div> | |
| 84 | |
| 85 </div> | |
| 86 </body> | |
| 87 </html> |