annotate DataTables-1.9.4/extras/Scroller/index.html @ 0:ac5f9272033b draft

first upload
author saskia-hiltemann
date Tue, 01 Jul 2014 11:42:23 -0400
parents
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
0
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
2 <html>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
3 <head>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
4 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
5 <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
6
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
7 <title>DataTables example</title>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
8 <style type="text/css">
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
9 @import "../../media/css/demo_page.css";
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
10 @import "../../media/css/demo_table.css";
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
11 @import "media/css/dataTables.scroller.css";
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
12 </style>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
13 <script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
14 <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
15 <script type="text/javascript" language="javascript" src="media/js/dataTables.scroller.js"></script>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
16 <script type="text/javascript" charset="utf-8">
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
17 $(document).ready(function() {
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
18 var oTable = $('#example').dataTable( {
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
19 "sScrollY": "192px",
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
20 "sAjaxSource": "media/data/2500.txt",
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
21 "sDom": "frtiS",
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
22 "bDeferRender": true
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
23 } );
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
24 } );
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
25 </script>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
26 </head>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
27 <body id="dt_example">
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
28 <div id="container" style="width:980px">
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
29 <div class="full_width big">
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
30 Scroller basic initialisation example
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
31 </div>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
32
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
33 <h1>Preamble</h1>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
34 <p>Scroller is a plug-in for DataTables which enhances the "infinite scrolling" feature that DataTables has built-in to make the scrolling feel more natural. The scrolling box shown on the page is the full height of the drawn table, but a virtual rendering technique is used to only render the part of the table that is actually viewable in the scrolling viewport in order to increase the speed of drawing.</p>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
35 <p>Note that Scroller assumes that all rows are of the same height (in order to preform the required calculations. You can use 'td { white-space: nowrap; }' in your CSS to ensure that text in rows does not wrap.</p>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
36 <p>This example shows how Scroller for DataTables can be initialised by simply including the character 'S' in sDom (note that the 'S' must come after the 't' in sDom). Deferred rendering an and Ajax data source are also used in this example.</p>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
37
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
38 <h1>Live example</h1>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
39 <div id="demo">
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
40 <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
41 <thead>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
42 <tr>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
43 <th>ID</th>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
44 <th>First name</th>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
45 <th>Last name</th>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
46 <th>ZIP</th>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
47 <th width="33%">Country</th>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
48 </tr>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
49 </thead>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
50 </table>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
51 </div>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
52 <div class="spacer"></div>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
53
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
54
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
55 <h1>Initialisation code</h1>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
56 <pre>$(document).ready(function() {
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
57 var oTable = $('#example').dataTable( {
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
58 "sScrollY": "200px",
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
59 "sAjaxSource": "media/data/2500.txt",
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
60 "sDom": "frtiS",
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
61 "bDeferRender": true
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
62 } );
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
63 } );</pre>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
64
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
65
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
66 <h1>Other examples</h1>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
67 <div class="demo_links">
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
68 <ul>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
69 <li><a href="index.html">Basic initialisation of Scroller</a></li>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
70 <li><a href="state_saving.html">State saving</a></li>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
71 <li><a href="api_scrolling.html">API - pragmatically move to a row</a></li>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
72 <li><a href="server-side_processing.html">Server-side processing with Scroller</a></li>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
73 <li><a href="large_js_source.html">50'000 rows in a table - client-side generated data</a></li>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
74 </ul>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
75 </div>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
76
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
77 </div>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
78 </body>
ac5f9272033b first upload
saskia-hiltemann
parents:
diff changeset
79 </html>