comparison DataTables-1.9.4/extras/Scroller/server-side_processing.html @ 16:3c697a0bc415 draft default tip

Uploaded
author saskia-hiltemann
date Wed, 06 Sep 2017 05:24:32 -0400
parents 3c160414da2e
children
comparison
equal deleted inserted replaced
15:1f44fe63e356 16:3c697a0bc415
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>