jules
/
DAAP_interface
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

pagination browse the archive

master
JoBCB 4 years ago
parent
6555c22111
commit
817fef3314
2 changed files with 242 additions and 24 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 81
      static/css/style.css
  2. 193
      templates/browsethearchive.html

81
static/css/style.css
View File

@ -1361,6 +1361,87 @@ div#browsethearchive-pagination, div#zinesindex-pagination, div#selfpublishedind
text-align: center; 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 ************/ /************ BROWSE BY CATEGORY ************/

193
templates/browsethearchive.html
View File

@ -38,37 +38,174 @@
</div> </div>
<div id="browsethearchive-pagination"> <ul id="pagin" class="browsethearchive-pagination">
<ul id="browsethearchive-pagin">
</ul> </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
//Pagination
pageSize = 24; //Pagination https://www.javaer101.com/en/article/123201810.html
pageSize = 4;
var pageCount = $(".browsethearchive-items").length / pageSize; incremSlide = 5;
startPage = 0;
for(var i = 0 ; i<pageCount;i++){ numberPage = 0;
$("#browsethearchive-pagin").append('<li><a href="#">'+(i+1)+'</a></li> '); var pageCount = $(".browsethearchive-items").length / pageSize;
} var totalSlidepPage = Math.floor(pageCount / incremSlide);
$("#browsethearchive-pagin li").first().addClass("current")
showPage = function(page) { for(var i = 0 ; i<pageCount;i++){
$(".browsethearchive-items").hide(); $("#pagin").append('<li><a href="#">'+(i+1)+'</a></li> ');
$(".browsethearchive-items").each(function(n) { if(i>pageSize){
if (n >= pageSize * (page - 1) && n < pageSize * page) $("#pagin li").eq(i).hide();
$(this).show(); }
}); }
}
var prev = $("<li/>").addClass("prev").html("Prev").click(function(){
showPage(1); startPage-=1;
incremSlide-=1;
$("#browsethearchive-pagin li").click(function() { numberPage--;
$("#browsethearchive-pagin li").removeClass("current"); slide();
$(this).addClass("current"); });
showPage(parseInt($(this).text()))
}); 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 = 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")
// }
// });
// 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> </script>

Write Preview
Loading…
Cancel
Save