Skip to content

Commit 0586de0

Browse files
jirenjiren
committed
Pagination
1 parent b870592 commit 0586de0

31 files changed

Lines changed: 2623 additions & 744 deletions

‎dist/filter.js‎

Lines changed: 659 additions & 495 deletions
Large diffs are not rendered by default.

‎dist/filter.min.js‎

Lines changed: 1408 additions & 20 deletions
Large diffs are not rendered by default.

‎examples/assets/css/stream.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -242,3 +242,14 @@ select:focus, textarea:focus, input:focus{
242242
margin-left: 10px;
243243
}
244244

245+
#pagination{
246+
text-align: center;
247+
}
248+
249+
250+
#pagination{
251+
text-align: center;
252+
}
253+
#pagination{
254+
text-align: center;
255+
}

‎examples/index.html‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,6 @@ <h1 class="title">Filter.js</h1>
1717
<div class="sidebar col-span-3">
1818
<div class="row">
1919
<h4 class="col-span-6"> Movies (<span id="total_movies">250</span>)</h4>
20-
<div class="col-span-6 progress">
21-
<div class="progress-bar" id="stream_progress" style="width: 0%">0 %</div>
22-
</div>
2320
</div>
2421
<div>
2522
<input type="text" id="searchbox" placeholder="Search...">
@@ -147,9 +144,15 @@ <h4>Genre</h4>
147144
</div></div>
148145

149146
</div>
150-
<div class="sorting content col-span-9">
151-
</div>
152-
<div class="movies content col-span-9" id="movies">
147+
<!--
148+
<div class="sorting content col-span-9"> </div>
149+
-->
150+
<div class="movies content col-span-9">
151+
<div class="row">
152+
<div id="per_page" class="col-span-2"></div>
153+
<div id="pagination" class="col-span-10"></div>
154+
</div>
155+
<div id="movies"></div>
153156
</div>
154157
<script id="movie-template" type="text/html">
155158
<div class="col-span-4 movie">

‎examples/index.js‎

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,12 @@ $(document).ready(function(){
55
var FJS = FilterJS(movies, '#movies', {
66
template: '#movie-template',
77
search: {ele: '#searchbox'},
8+
pagination: {
9+
container: '#pagination',
10+
per_page: {
11+
container: '#per_page'
12+
}
13+
},
814
//search: {ele: '#searchbox', fields: ['runtime']}, // With specific fields
915
callbacks: {
1016
afterFilter: function(result){
@@ -19,22 +25,6 @@ $(document).ready(function(){
1925
}
2026
});
2127

22-
FJS.addCallback('afterAddRecords', function(){
23-
var percent = (this.recordsCount - 250)*100/250;
24-
25-
$('#stream_progress').text(percent + '%').attr('style', 'width: '+ percent +'%;');
26-
27-
if (percent == 100){
28-
$('#stream_progress').parent().fadeOut(1000);
29-
}
30-
});
31-
32-
FJS.setStreaming({
33-
data_url: 'data/stream_movies.json',
34-
stream_after: 1,
35-
batch_size: 50
36-
});
37-
3828
FJS.addCriteria({field: 'year', ele: '#year_filter', type: 'range'});
3929
FJS.addCriteria({field: 'rating', ele: '#rating_filter', type: 'range'});
4030
FJS.addCriteria({field: 'runtime', ele: '#runtime_filter', type: 'range'});

‎examples/stream.html‎

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
<!DOCTYPE HTML>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
5+
<link href="assets/css/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css">
6+
<link href="assets/css/jquery-ui-1.10.2.custom.min.css" media="screen" rel="stylesheet" type="text/css">
7+
<link href="assets/css/stream.css" media="screen" rel="stylesheet" type="text/css">
8+
<script src="assets/js/jquery-1.11.1.min.js" type="text/javascript"></script>
9+
<script src="assets/js/jquery-ui-1.10.2.custom.min.js" type="text/javascript"></script>
10+
<script src="../dist/filter.js" type="text/javascript"></script>
11+
<script src="data/movies.js" type="text/javascript"></script>
12+
<script src="stream.js" type="text/javascript"></script>
13+
</head>
14+
<body>
15+
<div class="container">
16+
<h1 class="title">Filter.js</h1>
17+
<div class="sidebar col-span-3">
18+
<div class="row">
19+
<h4 class="col-span-6"> Movies (<span id="total_movies">250</span>)</h4>
20+
<div class="col-span-6 progress">
21+
<div class="progress-bar" id="stream_progress" style="width: 0%">0 %</div>
22+
</div>
23+
</div>
24+
<div>
25+
<input type="text" id="searchbox" placeholder="Search...">
26+
<span class="glyphicon glyphicon-search search-icon"></span>
27+
</div>
28+
<div class="criteria" id="rating_criteria">
29+
<h4>Rating</h4>
30+
<span id="rating_range_label" class="slider-label">8 - 10</span>
31+
<div id="rating_slider" class="slider"></div>
32+
<input type="hidden" id="rating_filter" value="8-10"/>
33+
</div>
34+
<div class="criteria" id="runtime_criteria">
35+
<h4>Runtime</h4>
36+
<span id="runtime_range_label" class="slider-label">50 mins - 250 mins</span>
37+
<div id="runtime_slider" class="slider"></div>
38+
<input type="hidden" id="runtime_filter" value="50-250">
39+
</div>
40+
<div class="criteria" id="year_criteria">
41+
<h4>Year</h4>
42+
<select id="year_filter" class="col-span-8">
43+
<option value="1920-2020">All (1920 - 2020)</option>
44+
<option value="1920-1930">1920 - 1930</option>
45+
<option value="1931-1940">1931 - 1940</option>
46+
<option value="1941-1950">1941 - 1950</option>
47+
<option value="1951-1960">1951 - 1960</option>
48+
<option value="1961-1970">1961 - 1970</option>
49+
<option value="1971-1980">1971 - 1980</option>
50+
<option value="1981-1990">1981 - 1990</option>
51+
<option value="1991-2000">1991 - 2000</option>
52+
<option value="2001-2010">2001 - 2010</option>
53+
<option value="2011-2020">2011 - 2020</option>
54+
</select>
55+
</div>
56+
<div class="criteria" id="genre_criteria">
57+
<h4>Genre</h4>
58+
<div class="checkbox">
59+
<label>
60+
<input type="checkbox" value="All" id="all_genre"> All
61+
</label>
62+
</div>
63+
<div class="checkbox">
64+
<label>
65+
<input type="checkbox" value="Crime"> Crime
66+
</label>
67+
</div><div class="checkbox">
68+
<label>
69+
<input type="checkbox" value="Drama"> Drama
70+
</label>
71+
</div><div class="checkbox">
72+
<label>
73+
<input type="checkbox" value="Thriller"> Thriller
74+
</label>
75+
</div><div class="checkbox">
76+
<label>
77+
<input type="checkbox" value="Adventure"> Adventure
78+
</label>
79+
</div><div class="checkbox">
80+
<label>
81+
<input type="checkbox" value="Western"> Western
82+
</label>
83+
</div><div class="checkbox">
84+
<label>
85+
<input type="checkbox" value="Action"> Action
86+
</label>
87+
</div><div class="checkbox">
88+
<label>
89+
<input type="checkbox" value="Biography"> Biography
90+
</label>
91+
</div><div class="checkbox">
92+
<label>
93+
<input type="checkbox" value="History"> History
94+
</label>
95+
</div><div class="checkbox">
96+
<label>
97+
<input type="checkbox" value="War"> War
98+
</label>
99+
</div><div class="checkbox">
100+
<label>
101+
<input type="checkbox" value="Fantasy"> Fantasy
102+
</label>
103+
</div><div class="checkbox">
104+
<label>
105+
<input type="checkbox" value="Sci-Fi"> Sci-Fi
106+
</label>
107+
</div><div class="checkbox">
108+
<label>
109+
<input type="checkbox" value="Mystery"> Mystery
110+
</label>
111+
</div><div class="checkbox">
112+
<label>
113+
<input type="checkbox" value="Romance"> Romance
114+
</label>
115+
</div><div class="checkbox">
116+
<label>
117+
<input type="checkbox" value="Family"> Family
118+
</label>
119+
</div><div class="checkbox">
120+
<label>
121+
<input type="checkbox" value="Horror"> Horror
122+
</label>
123+
</div><div class="checkbox">
124+
<label>
125+
<input type="checkbox" value="Film-Noir"> Film-Noir
126+
</label>
127+
</div><div class="checkbox">
128+
<label>
129+
<input type="checkbox" value="Comedy"> Comedy
130+
</label>
131+
</div><div class="checkbox">
132+
<label>
133+
<input type="checkbox" value="Animation"> Animation
134+
</label>
135+
</div><div class="checkbox">
136+
<label>
137+
<input type="checkbox" value="Musical"> Musical
138+
</label>
139+
</div><div class="checkbox">
140+
<label>
141+
<input type="checkbox" value="Music"> Music
142+
</label>
143+
</div><div class="checkbox">
144+
<label>
145+
<input type="checkbox" value="Sport"> Sport
146+
</label>
147+
</div></div>
148+
149+
</div>
150+
<div class="sorting content col-span-9">
151+
</div>
152+
<div class="movies content col-span-9" id="movies">
153+
</div>
154+
<script id="movie-template" type="text/html">
155+
<div class="col-span-4 movie">
156+
<div class="thumbnail">
157+
<span class="label label-success rating"><%= rating %>
158+
<i class="glyphicon glyphicon-star"></i>
159+
</span>
160+
<div class="caption">
161+
<h4><%= name %></h4>
162+
<div class="outline">
163+
<%= outline %>
164+
<span class="runtime">
165+
<i class="glyphicon glyphicon-time"></i>
166+
<%= runtime %> mins.
167+
</span>
168+
</div>
169+
<div class="detail">
170+
<dl>
171+
<dt>Director</dt>
172+
<dd><%= director %></dd>
173+
<dt>Actors</dt>
174+
<dd><%= stars %></dt>
175+
<dt>Year</dt>
176+
<dd><%= year %></dd>
177+
</dl>
178+
</div>
179+
</div>
180+
</div>
181+
</div>
182+
</script>
183+
<script id="genre_template" type="text/html">
184+
<div class="checkbox">
185+
<label>
186+
<input type="checkbox" value="<%= genre %>"> <%= genre %>
187+
</label>
188+
</div>
189+
</script>
190+
</body>
191+
</html>

‎examples/stream.js‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
$(document).ready(function(){
2+
3+
initSliders();
4+
5+
var FJS = FilterJS(movies, '#movies', {
6+
template: '#movie-template',
7+
search: {ele: '#searchbox'},
8+
//search: {ele: '#searchbox', fields: ['runtime']}, // With specific fields
9+
callbacks: {
10+
afterFilter: function(result){
11+
$('#total_movies').text(result.length);
12+
}
13+
}
14+
});
15+
16+
FJS.addCallback('beforeAddRecords', function(){
17+
if(this.recordsCount >= 450){
18+
this.stopStreaming();
19+
}
20+
});
21+
22+
FJS.addCallback('afterAddRecords', function(){
23+
var percent = (this.recordsCount - 250)*100/250;
24+
25+
$('#stream_progress').text(percent + '%').attr('style', 'width: '+ percent +'%;');
26+
27+
if (percent == 100){
28+
$('#stream_progress').parent().fadeOut(1000);
29+
}
30+
});
31+
32+
FJS.setStreaming({
33+
data_url: 'data/stream_movies.json',
34+
stream_after: 1,
35+
batch_size: 50
36+
});
37+
38+
FJS.addCriteria({field: 'year', ele: '#year_filter', type: 'range'});
39+
FJS.addCriteria({field: 'rating', ele: '#rating_filter', type: 'range'});
40+
FJS.addCriteria({field: 'runtime', ele: '#runtime_filter', type: 'range'});
41+
FJS.addCriteria({field: 'genre', ele: '#genre_criteria input:checkbox'});
42+
43+
/*
44+
* Add multiple criterial.
45+
FJS.addCriteria([
46+
{field: 'genre', ele: '#genre_criteria input:checkbox'},
47+
{field: 'year', ele: '#year_filter', type: 'range'}
48+
])
49+
*/
50+
51+
window.FJS = FJS;
52+
});
53+
54+
function initSliders(){
55+
$("#rating_slider").slider({
56+
min: 8,
57+
max: 10,
58+
values:[8, 10],
59+
step: 0.1,
60+
range:true,
61+
slide: function( event, ui ) {
62+
$("#rating_range_label" ).html(ui.values[ 0 ] + ' - ' + ui.values[ 1 ]);
63+
$('#rating_filter').val(ui.values[0] + '-' + ui.values[1]).trigger('change');
64+
}
65+
});
66+
67+
$("#runtime_slider").slider({
68+
min: 50,
69+
max: 250,
70+
values:[0, 250],
71+
step: 10,
72+
range:true,
73+
slide: function( event, ui ) {
74+
$("#runtime_range_label" ).html(ui.values[ 0 ] + ' mins. - ' + ui.values[ 1 ] + ' mins.');
75+
$('#runtime_filter').val(ui.values[0] + '-' + ui.values[1]).trigger('change');
76+
}
77+
});
78+
79+
$('#genre_criteria :checkbox').prop('checked', true);
80+
$('#all_genre').on('click', function(){
81+
$('#genre_criteria :checkbox').prop('checked', $(this).is(':checked'));
82+
});
83+
}

0 commit comments

Comments
 (0)