JS_Example_simplepager/simplepager.html at main · WebEngineering-Univaq/JS_Example_simplepager · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!doctype html>
<html>
    <head>
    <title>Javascript pagination</title>
        <link rel="stylesheet" href="iw_examples.css"/>
        <meta charset="utf-8"/>
<!--

WEB EGINEERING COURSE - University of L'Aquila

-->

    <style type="text/css">.pagerLink { background-color:white;
    color: blue; border: 1px solid blue; margin: 1px; padding: 2px;
    text-decoration: none; } .pagerCurrent { background-color:blue;
    color: white; border: 1px solid blue; margin: 1px; padding:
    4px; }</style>
    <script type="text/javascript" src="simplepager.js"></script>
    <script type="text/javascript" src="simplepagerdata.js">
    </script>
  </head>
  <body>
    <h1 class="sezione">A simple Javascript pager</h1>
    <p>In this example, paging is performed client-side with
    Javascript, which queries an external data source (such as a
    remote server via AJAX) to retrieve the data pages and create
    the pager.</p>
    <p>An important detail, however, is that the document is
    designed to support also server side paging: indeed, when
    loaded, it displays the first page of data and a set of static
    links to load the next ones, sending the page number as a
    parameter to the server.</p>
    <p>The script, if activated, replaces "on the fly" the
    server-side paging structures with the client-side ones. In
    this way, we need to develop the server support for two types
    of pagination (i.e., the server must be able to return complete
    pages or just blocks of data to be inserted in the page), but
    the user can always make use of the best available pagination
    mechanism.</p>
    <p>Go to page:
    <span id="paging">
      <span class="pagerCurrent">1</span>
      <a class="pagerLink" href="?page=2">2</a>
      <a class="pagerLink" href="?page=3">3</a>
    </span></p>
    <table border="1" id="voti">
      <tr>
        <th>Number</th>
        <th>Grade</th>
      </tr>
      <tr>
        <td>124610</td>
        <td>30</td>
      </tr>
      <tr>
        <td>112233</td>
        <td>28</td>
      </tr>
    </table>
  </body>
</html>