Skip to content

Commit

Permalink
Making Websites With October CMS - Part 43 - Ajax Pagination
Browse files Browse the repository at this point in the history
  • Loading branch information
Ivan Dorić authored and Ivan Dorić committed Aug 1, 2017
1 parent df3d12c commit 0d564a5
Show file tree
Hide file tree
Showing 4 changed files with 96 additions and 32 deletions.
104 changes: 73 additions & 31 deletions octobermovies.sublime-workspace
View file
Expand Up @@ -3,6 +3,10 @@
{
"selected_items":
[
[
"par",
"partialPaginate"
],
[
"sor",
"sortDirection"
Expand Down Expand Up @@ -355,7 +359,7 @@
"file": "plugins/watchlearn/movies/models/Movie.php",
"settings":
{
"buffer_size": 2499,
"buffer_size": 2632,
"encoding": "UTF-8",
"line_ending": "Unix"
}
Expand All @@ -364,16 +368,25 @@
"file": "themes/olympos/pages/movie-filter-ajax.htm",
"settings":
{
"buffer_size": 2715,
"buffer_size": 3009,
"encoding": "UTF-8",
"line_ending": "Unix"
}
},
{
"file": "themes/olympos/assets/js/app.js",
"file": "themes/olympos/partials/movies/movies.htm",
"settings":
{
"buffer_size": 325,
"buffer_size": 683,
"line_ending": "Unix"
}
},
{
"file": "themes/olympos/partials/movies/paginate.htm",
"settings":
{
"buffer_size": 313,
"encoding": "UTF-8",
"line_ending": "Unix"
}
}
Expand Down Expand Up @@ -630,9 +643,9 @@
],
"file_history":
[
"/Users/idoric/Development/public/octobermovies/themes/olympos/assets/js/app.js",
"/Users/idoric/Development/public/octobermovies/themes/olympos/partials/movies/movies.htm",
"/Users/idoric/Development/public/octobermovies/themes/olympos/pages/movie-filter-ajax.htm",
"/Users/idoric/Development/public/octobermovies/themes/olympos/assets/js/app.js",
"/Users/idoric/Development/public/octobermovies/themes/olympos/pages/filtermovies.htm",
"/Users/idoric/Development/public/octobermovies/themes/olympos/pages/homepage.htm",
"/Users/idoric/Development/public/octobermovies/themes/olympos/assets/sass/style.scss",
Expand Down Expand Up @@ -761,7 +774,7 @@
],
"find":
{
"height": 85.0
"height": 47.0
},
"find_in_files":
{
Expand Down Expand Up @@ -979,23 +992,23 @@
"semi_transient": false,
"settings":
{
"buffer_size": 2499,
"buffer_size": 2632,
"regions":
{
},
"selection":
[
[
1872,
1872
1436,
1436
]
],
"settings":
{
"syntax": "Packages/PHP/PHP.sublime-syntax"
},
"translation.x": 0.0,
"translation.y": 3172.0,
"translation.y": 2312.0,
"zoom_level": 1.0
},
"stack_index": 0,
Expand All @@ -1007,54 +1020,83 @@
"semi_transient": false,
"settings":
{
"buffer_size": 2715,
"buffer_size": 3009,
"regions":
{
},
"selection":
[
[
2297,
2297
651,
651
]
],
"settings":
{
"syntax": "Packages/October Twig Highlighter/october-twig.sublime-syntax"
},
"translation.x": 0.0,
"translation.y": 2476.0,
"translation.y": 625.0,
"zoom_level": 1.0
},
"stack_index": 1,
"stack_index": 2,
"type": "text"
},
{
"buffer": 2,
"file": "themes/olympos/assets/js/app.js",
"file": "themes/olympos/partials/movies/movies.htm",
"semi_transient": true,
"settings":
{
"buffer_size": 683,
"regions":
{
},
"selection":
[
[
0,
0
]
],
"settings":
{
"syntax": "Packages/Twig/Syntaxes/HTML (Twig).tmLanguage"
},
"translation.x": 0.0,
"translation.y": 0.0,
"zoom_level": 1.0
},
"stack_index": 3,
"type": "text"
},
{
"buffer": 3,
"file": "themes/olympos/partials/movies/paginate.htm",
"semi_transient": false,
"settings":
{
"buffer_size": 325,
"buffer_size": 313,
"regions":
{
},
"selection":
[
[
303,
303
262,
262
]
],
"settings":
{
"syntax": "Packages/JavaScript/JavaScript.sublime-syntax"
"_anf_new": "",
"syntax": "Packages/Twig/Syntaxes/HTML (Twig).tmLanguage"
},
"translation.x": 0.0,
"translation.y": 144.0,
"translation.y": 0.0,
"zoom_level": 1.0
},
"stack_index": 2,
"stack_index": 1,
"type": "text"
}
]
Expand Down Expand Up @@ -1634,9 +1676,17 @@
"select_project":
{
"height": 500.0,
"last_filter": "watc",
"last_filter": "wat",
"selected_items":
[
[
"wat",
"~/Development/public/watchlearn/watchlearn.sublime-project"
],
[
"october",
"~/Development/public/october/october.sublime-project"
],
[
"watc",
"~/Development/public/watchlearn/watchlearn.sublime-project"
Expand All @@ -1661,18 +1711,10 @@
"vip",
"~/Burza/vip-templates/vip-templates.sublime-project"
],
[
"wat",
"~/Development/public/watchlearn/watchlearn.sublime-project"
],
[
"kon",
"~/Development/public/iwmndev_vipnet-company-web1/konfigurator.sublime-project"
],
[
"october",
"~/Development/public/october/october.sublime-project"
],
[
"to",
"~/Development/public/todoapi/todoapi.sublime-project"
Expand Down
6 changes: 6 additions & 0 deletions plugins/watchlearn/movies/models/Movie.php
View file
Expand Up @@ -100,6 +100,12 @@ public function scopeListFrontEnd($query, $options = []){

}

$lastPage = $query->paginate($perPage, $page)->lastPage();

if($lastPage < $page){
$page = 1;
}

if($year){
$query->where('year', '=', $year);
}
Expand Down
8 changes: 7 additions & 1 deletion themes/olympos/pages/movie-filter-ajax.htm
View file
Expand Up @@ -21,6 +21,8 @@
$this['movies'] = Movie::listFrontEnd($options);
$this['genres'] = Genre::all();
$this['sortOptions'] = Movie::$allowedSortingOptions;
$this['pages'] = $this['movies']->lastPage();
$this['page'] = $this['movies']->currentPage();
}

function prepareYears() {
Expand All @@ -43,7 +45,7 @@ <h2 class="ui header" style="margin-top:40px;">Filter Movies</h2>
<div class="ui grid">

<div class="five wide column">
{{ form_ajax('onFilterMovies', { update: { 'movies/movies': '#partialMovies' } }) }}
{{ form_ajax('onFilterMovies', { update: { 'movies/movies': '#partialMovies', 'movies/paginate': '#partialPaginate' } }) }}
<div id="MoviesFilter" class="movies-filter ui form">
<div class="ui segment vertical">
<label>Genres</label>
Expand Down Expand Up @@ -74,6 +76,10 @@ <h2 class="ui header" style="margin-top:40px;">Filter Movies</h2>
{% endfor %}
</select>
</div>

<div class="field" id="partialPaginate">
{% partial 'movies/paginate' %}
</div>
</div>
</div>
{{ form_close() }}
Expand Down
10 changes: 10 additions & 0 deletions themes/olympos/partials/movies/paginate.htm
View file
@@ -0,0 +1,10 @@
<label>Page</label>
<select class="ui fluid dropdown" name="Filter[page]">
{% for i in 1..pages %}
{% if i == page %}
<option value="{{page}}" selected>{{ page }}</option>
{% else %}
<option value="{{i}}">{{ i }}</option>
{% endif %}
{% endfor %}
</select>

0 comments on commit 0d564a5

Please sign in to comment.