|
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/server_processing.php",
|
|
|
21 "bServerSide": true,
|
|
|
22 "sDom": "frtiS",
|
|
|
23 "oScroller": {
|
|
|
24 "loadingIndicator": true
|
|
|
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 example - server-side processing
|
|
|
34 </div>
|
|
|
35
|
|
|
36 <h1>Preamble</h1>
|
|
|
37 <p>When using server-side processing, Scroller will wait a small amount of time to allow the scrolling to finish before requesting more data from the server (200mS by default). This prevents you from DoSing your own server! This example shows Scroller in action with a database of 10'000 records, although of course server-side processing can scale much larger if you require. In this example we also enable the <i>loadingIndicator</i> option of Scroller to show the end user what is happening when they scroll passed the currently loaded data.</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 var oTable = $('#example').dataTable( {
|
|
|
59 "sScrollY": "200px",
|
|
|
60 "sAjaxSource": "media/data/server_processing.php",
|
|
|
61 "bServerSide": true,
|
|
|
62 "sDom": "frtiS",
|
|
|
63 "oScroller": {
|
|
|
64 "loadingIndicator": true
|
|
|
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> |
