Implemented pagination for videos.

app/YtManagerApp/templates/YtManagerApp/index_videos.html

@@ -58,4 +58,38 @@
             </div>
         {% endfor %}
     </div>
+
+    <div class="pagination row">
+        <div class="btn-toolbar mx-auto">
+            <div class="btn-group mr-2" role="group">
+                <button id="btn_page_first" type="button" class="btn btn-light btn-paging"
+                        data-toggle="tooltip" title="First page"
+                        {% if videos.has_previous %} data-navigation-page="1" {% else %} disabled {% endif %}>
+                    <span class="typcn typcn-chevron-left-outline" aria-hidden="true"></span>
+                </button>
+                <button id="btn_page_prev" type="button" class="btn btn-light btn-paging"
+                        data-toggle="tooltip" title="Previous"
+                        {% if videos.has_previous %} data-navigation-page="{{ videos.previous_page_number }}" {% else %} disabled {% endif %} >
+                    <span class="typcn typcn-chevron-left" aria-hidden="true"></span>
+                </button>
+            </div>
+
+            <small class="my-auto mx-2">
+                Page {{ videos.number }} of {{ videos.paginator.num_pages }}
+            </small>
+
+            <div class="btn-group mx-2" role="group">
+                <button id="btn_page_next" type="button" class="btn btn-light btn-paging"
+                        data-toggle="tooltip" title="Next"
+                        {% if videos.has_next %} data-navigation-page="{{ videos.next_page_number }}" {% else %} disabled {% endif %} >
+                    <span class="typcn typcn-chevron-right" aria-hidden="true"></span>
+                </button>
+                <button id="btn_page_last" type="button" class="btn btn-light btn-paging"
+                        data-toggle="tooltip" title="Last"
+                        {% if videos.has_next %} data-navigation-page="{{ videos.paginator.num_pages }}" {% else %} disabled {% endif %} >
+                    <span class="typcn typcn-chevron-right-outline" aria-hidden="true"></span>
+                </button>
+            </div>
+        </div>
+    </div>
 </div>

app/YtManagerApp/templates/YtManagerApp/js/index.js

@@ -123,16 +123,33 @@ function videos_Reload()
 
 let videos_timeout = null;
 
-function videos_ReloadWithTimer()
+function videos_ResetPageAndReloadWithTimer()
 {
+    let filters_form = $("#form_video_filter");
+    filters_form.find('input[name=page]').val("1");
+
     clearTimeout(videos_timeout);
     videos_timeout = setTimeout(function()
     {
-        videos_Submit.call($('#form_video_filter'));
+        videos_Reload();
         videos_timeout = null;
     }, 200);
 }
 
+function videos_PageClicked()
+{
+    // Obtain page from button
+    let page = $(this).data('navigation-page');
+
+    // Set page
+    let filters_form = $("#form_video_filter");
+    filters_form.find('input[name=page]').val(page);
+
+    // Reload
+    videos_Reload();
+    $("html, body").animate({ scrollTop: 0 }, "slow");
+}
+
 function videos_Submit(e)
 {
     let loadingDiv = $('#videos-loading');
@@ -145,6 +162,7 @@ function videos_Submit(e)
         .done(function(result) {
             $("#videos-wrapper").html(result);
             $(".ajax-link").on("click", ajaxLink_Clicked);
+            $(".btn-paging").on("click", videos_PageClicked);
         })
         .fail(function() {
             $("#videos-wrapper").html('<div class="alert alert-danger">An error occurred while retrieving the video list!</div>');
@@ -189,9 +207,11 @@ $(document).ready(function ()
     // Videos filters
     let filters_form = $("#form_video_filter");
     filters_form.submit(videos_Submit);
-    filters_form.find('input[name=query]').on('change', videos_ReloadWithTimer);
+    filters_form.find('input[name=query]').on('change', videos_ResetPageAndReloadWithTimer);
-    filters_form.find('select[name=sort]').on('change', videos_ReloadWithTimer);
+    filters_form.find('select[name=sort]').on('change', videos_ResetPageAndReloadWithTimer);
-    filters_form.find('select[name=show_watched]').on('change', videos_ReloadWithTimer);
+    filters_form.find('select[name=show_watched]').on('change', videos_ResetPageAndReloadWithTimer);
-    filters_form.find('select[name=show_downloaded]').on('change', videos_ReloadWithTimer);
+    filters_form.find('select[name=show_downloaded]').on('change', videos_ResetPageAndReloadWithTimer);
+    filters_form.find('select[name=results_per_page]').on('change', videos_ResetPageAndReloadWithTimer);
+
     videos_Reload();
 });

app/YtManagerApp/views/index.py

@@ -9,6 +9,7 @@ from django.shortcuts import render
 from django.views.generic import CreateView, UpdateView, DeleteView, FormView
 from django.views.generic.edit import FormMixin
 from django.conf import settings
+from django.core.paginator import Paginator
 from YtManagerApp.management.videos import get_videos
 from YtManagerApp.models import Subscription, SubscriptionFolder, VIDEO_ORDER_CHOICES, VIDEO_ORDER_MAPPING
 from YtManagerApp.utils import youtube, subscription_file_parser
@@ -36,6 +37,13 @@ class VideoFilterForm(forms.Form):
         'all': None
     }
 
+    CHOICES_RESULT_COUNT = (
+        (25, 25),
+        (50, 50),
+        (100, 100),
+        (200, 200)
+    )
+
     query = forms.CharField(label='', required=False)
     sort = forms.ChoiceField(label='Sort:', choices=VIDEO_ORDER_CHOICES, initial='newest')
     show_watched = forms.ChoiceField(label='Show only: ', choices=CHOICES_SHOW_WATCHED, initial='all')
@@ -48,6 +56,11 @@ class VideoFilterForm(forms.Form):
         required=False,
         widget=forms.HiddenInput()
     )
+    page = forms.IntegerField(
+        required=False,
+        widget=forms.HiddenInput()
+    )
+    results_per_page = forms.ChoiceField(label='Results per page: ', choices=CHOICES_RESULT_COUNT, initial=50)
 
     def __init__(self, data=None):
         super().__init__(data, auto_id='form_video_filter_%s')
@@ -65,7 +78,9 @@ class VideoFilterForm(forms.Form):
             'show_watched',
             'show_downloaded',
             'subscription_id',
-            'folder_id'
+            'folder_id',
+            'page',
+            'results_per_page'
         )
 
     def clean_sort(self):
@@ -147,6 +162,9 @@ def ajax_get_videos(request: HttpRequest):
                 only_downloaded=form.cleaned_data['show_downloaded']
             )
 
+            paginator = Paginator(videos, form.cleaned_data['results_per_page'])
+            videos = paginator.get_page(form.cleaned_data['page'])
+
             context = {
                 'videos': videos
             }