forked from backbone-paginator/backbone.paginator
-
Notifications
You must be signed in to change notification settings - Fork 0
/
server-pagination.html
110 lines (77 loc) · 2.6 KB
/
server-pagination.html
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Backbone.js pagination</title>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
</head>
<body>
<div class="container">
<p> </p>
<div class="page-header">
<h1>Backbone.js Paginator 0.13 <small>Server-side pagination example</small></h1>
</div>
<h3>NetFlix movies</h3>
<ul id="content2">
</ul>
<div id="pagination2">
</div>
<div class="alert-message block-message warning">
<p>Note: The Netflix OData feed may not return the last page depending the query used and approximation of total results returned. For customization, 'last' functioning is entirely dependant on how your backend returns results.</p>
</div>
</div>
<!-- server pagination -->
<script type="text/html" id="tmpServerPagination">
<div class="breadcrumb">
<span class="cell ">
<% if (page > 1) { %>
<a href="#" class="serverprevious">Previous</a>
<% }else{ %>
<span>Previous</span>
<% }%>
<% if (page < totalPages) { %>
<a href="#" class="servernext">Next</a>
<% } %>
<% if (lastPage != page) { %>
<a href="#" class="serverlast">Last</a>
<% } %>
<span class="cell serverhowmany">
Show
<a href="#" class="selected">20</a>
|
<a href="#" class="">50</a>
|
<a href="#" class="">100</a>
</span>
<span class="cell first records">
<span class="current"><%= page %></span>
of
<span class="total"><%= totalPages %></span>
shown
</span>
<span class="cell sort">
<a href="#" class="orderUpdate btn small">Sort by:</a>
</span>
<select id="sortByField">
<option value="ReleaseYear">Release year</option>
<option value="month(Instant/AvailableFrom)">Release month</option>
</select>
</span>
</div>
</script>
<!-- scripts-->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="libs/underscore.js"></script>
<script src="libs/json2.js"></script>
<script src="libs/backbone.js"></script>
<script src="app.js"></script>
<!--Pagination-->
<script src="backbone.paginator.js"></script>
<!--Models/Collections-->
<script src="models/Tag.js"></script>
<script src="collections/tagsServer.js"></script>
<!--Views-->
<script src="views/TagsServer.js"></script>
<script src="views/serverPagination.js"></script>
</body>
</html>