new dynamic js pagination ok

ot_templating/Resources/Private/Layouts/Classic/StructuresFrame.html

@@ -135,20 +135,20 @@
                             </div>
                         </div>
 
-                        <div class="pagination-bar" data-current-page="1">
-                            <a class="goto-page" data-page="1" href="#" title="{f:translate(key:'go-to-first-page')}">
+                        <div class="pagination-bar">
+                            <a class="goto-page goto-first-page" data-page="1" href="#" title="{f:translate(key:'go-to-first-page')}">
                                 <i class="fa fa-angle-double-left"></i>
                             </a>
 
                             <ul class="pagination-list">
-                                <li class="goto-page-model" style="display: none;">
-                                    <a data-page="1" href="#" title="{f:translate(key:'go-to-page')}">
+                                <li class="goto-page-li-model" style="display: none;">
+                                    <a class="goto-page" data-page="1" href="#" title="{f:translate(key:'go-to-page')}">
                                         1
                                     </a>
                                 </li>
                             </ul>
 
-                            <a class="goto-page" data-page="-1" href="#" title="{f:translate(key:'go-to-last-page')}">
+                            <a class="goto-page goto-last-page" data-page="-1" href="#" title="{f:translate(key:'go-to-last-page')}">
                                 <i class="fa fa-angle-double-right"></i>
                             </a>
                         </div>

ot_templating/Resources/Public/assets/Classic/script/structures.js

@@ -54,6 +54,8 @@ $(document).ready(function() {
         let cardDivModel = $('.ot-structures-frame .structure-card-model');
         let paginationBar = $('.ot-structures-frame .pagination-bar');
         let paginationList = $('.ot-structures-frame .pagination-list');
+        let gotoFirstPage = $(".ot-structures-frame .goto-first-page")
+        let gotoLastPage = $(".ot-structures-frame .goto-last-page")
 
         let totalStructures = structures.length;
         let itemsPerPage = 10;
@@ -64,11 +66,29 @@ $(document).ready(function() {
             noResultSpan.show();
         }
 
+        totalPages = Math.floor(totalStructures / itemsPerPage);
+
+        // update the 'goto last page' link
+        gotoLastPage.data("page", totalPages);
+
+        // on page link clicked event
+        let pageLinkClicked = function(e) {
+            e.preventDefault();
+            let page = $(this).data('page');
+            showPage(page);
+            $('body,html').animate({scrollTop: 0},500);
+        }
+
+        gotoFirstPage.on('click', pageLinkClicked)
+        gotoLastPage.on('click', pageLinkClicked)
+
         function showPage(page) {
 
             let index = 0;
             $('.ot-structures-frame .structures-page .structure-card').remove();
 
+            pleaseWaitSpan.show();
+
             structures.forEach(function(structure) {
 
                 if (((page - 1) * itemsPerPage) <= index && index < (page * itemsPerPage)) {
@@ -93,40 +113,35 @@ $(document).ready(function() {
             });
 
             // Update the pagination
-            $('.ot-structures-frame .pagination-list .goto-page').remove();
-            let pageLiModel = paginationList.find('.goto-page-model').first();
+            $('.ot-structures-frame .pagination-list .goto-page-li').remove();
+            let pageLiModel = paginationList.find('.goto-page-li-model').first();
 
-            $totalPages = Math.floor(totalStructures / itemsPerPage);
+            page_min = page > 5 ? page - 5 : 1;
+            page_max = page < (totalPages - 5) ? page + 5 : totalPages;
 
-            for (let i = 1; i < $totalPages; i++) {
+            for (let i = page_min; i <= page_max; i++) {
                 let pageLi = pageLiModel.clone();
 
                 let pageLink = pageLi.children('a').first();
 
                 pageLink.text("" + i);
-                pageLink.data("page", i);
+                pageLink.attr("data-page", i);
+                pageLink.on('click', pageLinkClicked)
 
                 if (i === page) {
                     pageLi.addClass('current');
                 }
-                pageLi.removeClass('goto-page-model')
-                pageLi.addClass('goto-page')
+                pageLi.removeClass('goto-page-li-model')
+                pageLi.addClass('goto-page-li')
+
                 pageLi.show();
+
                 pageLi.appendTo(paginationList);
             }
+            pleaseWaitSpan.hide();
         }
-        showPage(1);
-
-        $('.goto-page a').on('click', function (e) {
-            e.preventDefault();
-            let page = $(this).data('page');
-            console.log('go to page ' + page)
-            $(window).scrollTop(0);
-            showPage(page);
-        });
-
-        pleaseWaitSpan.hide();
 
+        showPage(1);
     }
 
     // Map goto commands

ot_templating/Resources/Public/assets/Classic/style/module/_pagination.scss

@@ -5,6 +5,7 @@ $content-a-color: $content-a-color;
   flex-direction: row;
   margin: 12px auto;
   align-items: center;
+  justify-content: center;
 }
 
 .pagination-bar p {