|
0
|
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 oTable = $('#example').dataTable( {
|
|
|
19 "sScrollY": "200px",
|
|
|
20 "sAjaxSource": "media/data/2500.txt",
|
|
|
21 "sDom": "frtiS",
|
|
|
22 "bDeferRender": true,
|
|
|
23 "bStateSave": true
|
|
|
24 } );
|
|
|
25 } );
|
|
|
26 </script>
|
|
|
27 </head>
|
|
|
28 <body id="dt_example">
|
|
|
29 <div id="container" style="width:980px">
|
|
|
30 <div class="full_width big">
|
|
|
31 Scroller with state saving
|
|
|
32 </div>
|
|
|
33
|
|
|
34 <h1>Preamble</h1>
|
|
|
35 <p>Scroller will automatically integrate with DataTables in order to save the scrolling position of the table, if state saving is enabled in the DataTable (bStateSave). This example shows that in practice - to demonstrate, scroll the table and then reload the page.</p>
|
|
|
36
|
|
|
37 <h1>Live example</h1>
|
|
|
38 <div id="demo">
|
|
|
39 <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
|
|
|
40 <thead>
|
|
|
41 <tr>
|
|
|
42 <th>ID</th>
|
|
|
43 <th>First name</th>
|
|
|
44 <th>Last name</th>
|
|
|
45 <th>ZIP</th>
|
|
|
46 <th width="33%">Country</th>
|
|
|
47 </tr>
|
|
|
48 </thead>
|
|
|
49 </table>
|
|
|
50 </div>
|
|
|
51 <div class="spacer"></div>
|
|
|
52
|
|
|
53
|
|
|
54 <h1>Initialisation code</h1>
|
|
|
55 <pre>$(document).ready(function() {
|
|
|
56 var oTable = $('#example').dataTable( {
|
|
|
57 "sScrollY": "200px",
|
|
|
58 "sAjaxSource": "media/data/2500.txt",
|
|
|
59 "sDom": "frtiS",
|
|
|
60 "bDeferRender": true,
|
|
|
61 "bStateSave": true
|
|
|
62 } );
|
|
|
63 } );</pre>
|
|
|
64
|
|
|
65
|
|
|
66 <h1>Other examples</h1>
|
|
|
67 <div class="demo_links">
|
|
|
68 <ul>
|
|
|
69 <li><a href="index.html">Basic initialisation of Scroller</a></li>
|
|
|
70 <li><a href="state_saving.html">State saving</a></li>
|
|
|
71 <li><a href="api_scrolling.html">API - pragmatically move to a row</a></li>
|
|
|
72 <li><a href="server-side_processing.html">Server-side processing with Scroller</a></li>
|
|
|
73 <li><a href="large_js_source.html">50'000 rows in a table - client-side generated data</a></li>
|
|
|
74 </ul>
|
|
|
75 </div>
|
|
|
76
|
|
|
77 </div>
|
|
|
78 </body>
|
|
|
79 </html> |
