pagination browse the archive

static/css/style.css

@@ -1361,6 +1361,87 @@ div#browsethearchive-pagination, div#zinesindex-pagination, div#selfpublishedind
 	text-align: center;
 }
 
+/*temptative pagination*/
+
+ul.browsethearchive-pagination {
+	width: 100%;
+	background-color: #e9e9e9;
+	border-top: black solid 3px;
+	height: 139px;
+	display: flex;
+	flex-direction: row;
+	justify-content: center; /*space-around */
+	align-content: baseline;
+	margin-left: auto;
+	margin-right: auto;
+	padding-top: 42px;
+	padding-bottom: 52px;
+	padding-left: 8vw;
+	padding-right: 8vw;
+}
+
+ul.browsethearchive-pagination li {
+	display: flex;
+  	justify-content: center;
+  	width: 36px;
+  	height: 36px;
+  	border-radius: 6px;
+    list-style: none;
+    text-align: center;
+}
+
+ul.browsethearchive-pagination li a, ul.browsethearchive-pagination li a:visited {
+	font-family: Roboto Condensed, sans-serif;
+    font-size: 14px;
+    line-height: 48px;
+    font-weight: bold;
+    font-stretch: condensed; 
+    text-decoration: none;
+    color: #000;
+}
+
+ul.browsethearchive-pagination li.prev, ul.browsethearchive-pagination li.next {
+    display: flex;
+    flex-direction: row;
+    font-size: 0;
+}
+
+ul.browsethearchive-pagination li.prev::before {
+    display: inline-block;
+    content: ' ';
+    background-image: url('Icons/icn_arrow_left.svg');
+    background-size: 16px 16px;
+    height: 16px;
+    width: 16px;
+    margin: 16px 16px 0px 0px;
+    cursor: pointer;
+}
+
+ul.browsethearchive-pagination li.next::after {
+    display: inline-block;
+    content: ' ';
+    background-image: url('Icons/icn_arrow_right.svg');
+    background-size: 16px 16px;
+    height: 16px;
+    width: 16px;
+    margin: 16px 0px 0px 16px;
+    cursor: pointer;
+}
+
+ul.browsethearchive-pagination li a.current {
+    height: 36px;
+    width: 36px;
+    border-radius: 6px;
+    background-color: #1B42D8;
+    color: white;
+    display: flex;
+    align-content: baseline;
+    margin-top: 6px;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+}
+
 
 /************ BROWSE BY CATEGORY ************/
 

templates/browsethearchive.html

@@ -38,37 +38,174 @@
 
 </div>
 
-<div id="browsethearchive-pagination">
-<ul id="browsethearchive-pagin">    
+<ul id="pagin" class="browsethearchive-pagination">
+         
 </ul>
-</div>
+
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 
 <script type="text/javascript">
-	//Pagination
-	pageSize = 24;
 
-	var pageCount =  $(".browsethearchive-items").length / pageSize;
+//Pagination https://www.javaer101.com/en/article/123201810.html
+pageSize = 4;
+incremSlide = 5;
+startPage = 0;
+numberPage = 0;
+
+var pageCount =  $(".browsethearchive-items").length / pageSize;
+var totalSlidepPage = Math.floor(pageCount / incremSlide);
     
-     for(var i = 0 ; i<pageCount;i++){
-        
-       $("#browsethearchive-pagin").append('<li><a href="#">'+(i+1)+'</a></li> ');
-     }
-        $("#browsethearchive-pagin li").first().addClass("current")
-    showPage = function(page) {
-	    $(".browsethearchive-items").hide();
-	    $(".browsethearchive-items").each(function(n) {
-	        if (n >= pageSize * (page - 1) && n < pageSize * page)
-	            $(this).show();
-	    });        
-	}
+for(var i = 0 ; i<pageCount;i++){
+    $("#pagin").append('<li><a href="#">'+(i+1)+'</a></li> ');
+    if(i>pageSize){
+       $("#pagin li").eq(i).hide();
+    }
+}
+
+var prev = $("<li/>").addClass("prev").html("Prev").click(function(){
+   startPage-=1;
+   incremSlide-=1;
+   numberPage--;
+   slide();
+});
+
+prev.hide();
+
+var next = $("<li/>").addClass("next").html("Next").click(function(){
+   startPage+=1;
+   incremSlide+=1;
+   numberPage++;
+   slide();
+});
+
+
+$("#pagin").prepend(prev).append(next);
+
+$("#pagin li").first().find("a").addClass("current");
+
+slide = function(sens){
+   $("#pagin li").hide();
+   
+   for(t=startPage;t<incremSlide;t++){
+     $("#pagin li").eq(t+1).show();
+   }
+   if(startPage == 0){
+     next.show();
+     prev.hide();
+   }else if(numberPage == totalSlidepPage ){
+     next.hide();
+     prev.show();
+   }else{
+     next.show();
+     prev.show();
+   }
+   
     
-	showPage(1);
+}
+
+showPage = function(page) {
+	  $(".browsethearchive-items").hide();
+	  $(".browsethearchive-items").each(function(n) {
+	      if (n >= pageSize * (page - 1) && n < pageSize * page)
+	          $(this).show();
+	  });        
+}
+    
+showPage(1);
+$("#pagin li a").eq(0).addClass("current");
+
+
+var $listItems = $('#pagin li a');
+var activeLink;
+
+
+$("#pagin li a").click(function() {
+
+	$listItems.removeClass('current');
+    $(this).addClass('current');  
+    var activeLink=$(this);
+
+    showPage(parseInt($(this).text()));
+});
+
+
+var i = 1;
+
+$(".prev").click(function() {
+
+    let prevLi = $("#pagin li a.current").parent().prev().find("a");
+    $("#pagin li a.current").removeClass("current");
+    prevLi.addClass("current");
+
+
+    if (i != 1) {
+      showPage(--i);
+    }
+});
+$(".next").click(function() {
+
+    let nextLi = $("#pagin li a.current").parent().next().find("a");
+    $("#pagin li a.current").removeClass("current");
+    nextLi.addClass("current");
+
+    if (i < ($('.browsethearchive-items').length)/4) {
+      showPage(++i);
+    }    
+});
+
+
+
+
+
+	 // $("#pagin li a").removeClass("current");
+	 // $(this).addClass("current");
+
+
+
+
+
+    // $(".next").removeClass("");
+    // $(this).addClass("");
+
+
+
+	//$('#pagin li a').removeClass('current');
+
+	// $("#pagin li").eq().addClass('current');
+
+ 	// $(this).addClass('current');  
+ 	// var activeLink=$(this);
+	// $activeLi.next().addClass('current');  
+    
+    // showPage($('#pagin li a').addClass('current'));
+
+    // var $activeLi = $('#pagin li').find("a.current");
+    // $activeLi.removeClass('current');
+
+    // if($activeLi.next()!=null && $activeLi.next()!=undefined ){
+    // 	$activeLi.next().addClass('current');  
+    // 	}else{
+    // 	$('#pagin li').find("a:last").addClass("current")
+    // }
+
+
+
+
+
+// $('.next').on('click',function(){
+//     var $activeLi=$('#pagin li').find("a.current");
+//     $activeLi.removeClass('current');
+
+//     if($activeLi.next().length>0 ){
+// 	$activeLi.next().addClass('current');  
+// 	}else{
+// 	$('#pagin li').find("a:first").addClass("current")
+// 	}
+
+// });
 
-	$("#browsethearchive-pagin li").click(function() {
-	    $("#browsethearchive-pagin li").removeClass("current");
-	    $(this).addClass("current");
-	    showPage(parseInt($(this).text())) 
-	});
+// https://stackoverflow.com/questions/23335133/add-and-remove-pagination-active-class-when-i-click-in-next-and-prev-arrows
+// https://stackoverflow.com/questions/23335133/add-and-remove-pagination-active-class-when-i-click-in-next-and-prev-arrows/23337941
 
 </script>