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

added pagination script to all templates

master
JoBCB 4 years ago
parent
274a107043
commit
1920d8eabc
5 changed files with 434 additions and 98 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. 111
      templates/artistsindex.html
  2. 72
      templates/browsethearchive.html
  3. 108
      templates/publishersindex.html
  4. 117
      templates/selfpublishedindex.html
  5. 118
      templates/zinesindex.html

111
templates/artistsindex.html
View File

@ -34,20 +34,115 @@
</table> </table>
<ul id="pagin" class="browsethearchive-pagination">
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
$('#artistsindex-table').dataTable({
ordering: false, <script type="text/javascript">
searching: false,
lengthChange: false, // pagination script w/ support from @biberman on stackoverflow - big thanks!
pageLength:20,
info: false
let startPage;
const pageSize = 24;
const totalSlidePage = 5;
const pageCount = Math.ceil($("tr").length / pageSize);
const slideRange = Math.floor(totalSlidePage / 2);
slide = function() {
startPage = $("#pagin li a.current").parent().index();
let paginationStart = (startPage - slideRange) <= 1 ? 0 :
(startPage >= (pageCount - slideRange) ? (pageCount - totalSlidePage) :
(startPage - slideRange - 1));
$("#pagin li").hide();
for (let t = paginationStart; t < (paginationStart + totalSlidePage); t++) {
$("#pagin li").eq(t + 1).show();
}
next.show();
prev.show();
if (startPage == 1) {
prev.hide();
}
if (startPage == pageCount ) {
next.hide();
}
}
showPage = function() {
console.log(startPage);
$("tr").hide();
$("tr").each(function(n) {
if (n >= pageSize * (startPage - 1) && n < pageSize * startPage)
$(this).show();
}); });
}
for (let i = 0 ; i < pageCount; i++) {
$("#pagin").append('<li><a href="#">' + (i + 1) + '</a></li> ');
if (i > pageSize) {
$("#pagin li").eq(i).hide();
}
}
let prev = $("<li/>").addClass("prev").html("Prev").click(function() {
let prevLi = $("#pagin li a.current").parent().prev().find("a");
if (prevLi[0]) {
$("#pagin li a.current").removeClass("current");
prevLi.addClass("current");
}
slide();
if (startPage != 0) {
showPage();
}
});
let next = $("<li/>").addClass("next").html("Next").click(function() {
let nextLi = $("#pagin li a.current").parent().next().find("a");
if (nextLi[0]) {
$("#pagin li a.current").removeClass("current");
nextLi.addClass("current");
}
slide();
if (startPage <= pageCount) {
showPage();
}
});
$("#pagin").prepend(prev).append(next);
$("#pagin li a").click(function() {
$('#pagin li a').removeClass('current');
$(this).addClass('current');
slide();
showPage();
}); });
$("#pagin li a").eq(0).addClass("current");
slide();
showPage();
</script> </script>
{% endblock content %} {% endblock content %}

72
templates/browsethearchive.html
View File

@ -64,43 +64,43 @@ let paginationStart = (startPage - slideRange) <= 1 ? 0 :
$("#pagin li").hide(); $("#pagin li").hide();
for (let t = paginationStart; t < (paginationStart + totalSlidePage); t++) { for (let t = paginationStart; t < (paginationStart + totalSlidePage); t++) {
$("#pagin li").eq(t + 1).show(); $("#pagin li").eq(t + 1).show();
} }
next.show(); next.show();
prev.show(); prev.show();
if (startPage == 1) { if (startPage == 1) {
prev.hide(); prev.hide();
} }
else if (startPage == pageCount ) { if (startPage == pageCount ) {
next.hide(); next.hide();
} }
} }
showPage = function() { showPage = function() {
console.log(startPage); console.log(startPage);
$(".browsethearchive-items").hide(); $(".browsethearchive-items").hide();
$(".browsethearchive-items").each(function(n) { $(".browsethearchive-items").each(function(n) {
if (n >= pageSize * (startPage - 1) && n < pageSize * startPage) if (n >= pageSize * (startPage - 1) && n < pageSize * startPage)
$(this).show(); $(this).show();
}); });
} }
for (let i = 0 ; i < pageCount; i++) { for (let i = 0 ; i < pageCount; i++) {
$("#pagin").append('<li><a href="#">' + (i + 1) + '</a></li> '); $("#pagin").append('<li><a href="#">' + (i + 1) + '</a></li> ');
if (i > pageSize) { if (i > pageSize) {
$("#pagin li").eq(i).hide(); $("#pagin li").eq(i).hide();
} }
} }
let prev = $("<li/>").addClass("prev").html("Prev").click(function() { let prev = $("<li/>").addClass("prev").html("Prev").click(function() {
let prevLi = $("#pagin li a.current").parent().prev().find("a"); let prevLi = $("#pagin li a.current").parent().prev().find("a");
if (prevLi[0]) { if (prevLi[0]) {
$("#pagin li a.current").removeClass("current"); $("#pagin li a.current").removeClass("current");
prevLi.addClass("current"); prevLi.addClass("current");
} }
slide(); slide();
@ -111,28 +111,28 @@ showPage();
}); });
let next = $("<li/>").addClass("next").html("Next").click(function() { let next = $("<li/>").addClass("next").html("Next").click(function() {
let nextLi = $("#pagin li a.current").parent().next().find("a"); let nextLi = $("#pagin li a.current").parent().next().find("a");
if (nextLi[0]) { if (nextLi[0]) {
$("#pagin li a.current").removeClass("current"); $("#pagin li a.current").removeClass("current");
nextLi.addClass("current"); nextLi.addClass("current");
} }
slide(); slide();
if (startPage <= pageCount) { if (startPage <= pageCount) {
showPage(); showPage();
} }
}); });
$("#pagin").prepend(prev).append(next); $("#pagin").prepend(prev).append(next);
$("#pagin li a").click(function() { $("#pagin li a").click(function() {
$('#pagin li a').removeClass('current'); $('#pagin li a').removeClass('current');
$(this).addClass('current'); $(this).addClass('current');
slide(); slide();
showPage(); showPage();
}); });
$("#pagin li a").eq(0).addClass("current"); $("#pagin li a").eq(0).addClass("current");

108
templates/publishersindex.html
View File

@ -33,12 +33,16 @@
</tbody> </tbody>
</table> </table>
<ul id="pagin" class="browsethearchive-pagination">
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script> <!-- <script>
$(document).ready(function(){ $(document).ready(function(){
$('#publishersindex-table').dataTable({ $('#publishersindex-table').dataTable({
ordering: false, ordering: false,
@ -48,7 +52,107 @@ $(document).ready(function(){
info: false info: false
}); });
}); });
</script> </script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
// pagination script w/ support from @biberman on stackoverflow - big thanks!
let startPage;
const pageSize = 24;
const totalSlidePage = 5;
const pageCount = Math.ceil($("tr").length / pageSize);
const slideRange = Math.floor(totalSlidePage / 2);
slide = function() {
startPage = $("#pagin li a.current").parent().index();
let paginationStart = (startPage - slideRange) <= 1 ? 0 :
(startPage >= (pageCount - slideRange) ? (pageCount - totalSlidePage) :
(startPage - slideRange - 1));
$("#pagin li").hide();
for (let t = paginationStart; t < (paginationStart + totalSlidePage); t++) {
$("#pagin li").eq(t + 1).show();
}
next.show();
prev.show();
if (startPage == 1) {
prev.hide();
}
if (startPage == pageCount ) {
next.hide();
}
}
showPage = function() {
console.log(startPage);
$("tr").hide();
$("tr").each(function(n) {
if (n >= pageSize * (startPage - 1) && n < pageSize * startPage)
$(this).show();
});
}
for (let i = 0 ; i < pageCount; i++) {
$("#pagin").append('<li><a href="#">' + (i + 1) + '</a></li> ');
if (i > pageSize) {
$("#pagin li").eq(i).hide();
}
}
let prev = $("<li/>").addClass("prev").html("Prev").click(function() {
let prevLi = $("#pagin li a.current").parent().prev().find("a");
if (prevLi[0]) {
$("#pagin li a.current").removeClass("current");
prevLi.addClass("current");
}
slide();
if (startPage != 0) {
showPage();
}
});
let next = $("<li/>").addClass("next").html("Next").click(function() {
let nextLi = $("#pagin li a.current").parent().next().find("a");
if (nextLi[0]) {
$("#pagin li a.current").removeClass("current");
nextLi.addClass("current");
}
slide();
if (startPage <= pageCount) {
showPage();
}
});
$("#pagin").prepend(prev).append(next);
$("#pagin li a").click(function() {
$('#pagin li a').removeClass('current');
$(this).addClass('current');
slide();
showPage();
});
$("#pagin li a").eq(0).addClass("current");
slide();
showPage();
</script>
{% endblock content %} {% endblock content %}

117
templates/selfpublishedindex.html
View File

@ -37,37 +37,106 @@
</div> </div>
<div id="selfpublishedindex-pagination"> <ul id="pagin" class="browsethearchive-pagination">
<ul id="selfpublishedindex-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 script w/ support from @biberman on stackoverflow - big thanks!
var pageCount = $(".selfpublishedindex-items").length / pageSize;
let startPage;
for(var i = 0 ; i<pageCount;i++){ const pageSize = 24;
const totalSlidePage = 5;
$("#selfpublishedindex-pagin").append('<li><a href="#">'+(i+1)+'</a></li> '); const pageCount = Math.ceil($(".selfpublishedindex-items").length / pageSize);
} const slideRange = Math.floor(totalSlidePage / 2);
$("#selfpublishedindex-pagin li").first().addClass("current")
showPage = function(page) { slide = function() {
$(".selfpublishedindex-items").hide(); startPage = $("#pagin li a.current").parent().index();
$(".selfpublishedindex-items").each(function(n) { let paginationStart = (startPage - slideRange) <= 1 ? 0 :
if (n >= pageSize * (page - 1) && n < pageSize * page) (startPage >= (pageCount - slideRange) ? (pageCount - totalSlidePage) :
$(this).show(); (startPage - slideRange - 1));
});
$("#pagin li").hide();
for (let t = paginationStart; t < (paginationStart + totalSlidePage); t++) {
$("#pagin li").eq(t + 1).show();
} }
showPage(1); next.show();
prev.show();
$("#selfpublishedindex-pagin li").click(function() { if (startPage == 1) {
$("#selfpublishedindex-pagin li").removeClass("current"); prev.hide();
$(this).addClass("current"); }
showPage(parseInt($(this).text())) if (startPage == pageCount ) {
next.hide();
}
}
showPage = function() {
console.log(startPage);
$(".selfpublishedindex-items").hide();
$(".selfpublishedindex-items").each(function(n) {
if (n >= pageSize * (startPage - 1) && n < pageSize * startPage)
$(this).show();
}); });
}
for (let i = 0 ; i < pageCount; i++) {
$("#pagin").append('<li><a href="#">' + (i + 1) + '</a></li> ');
if (i > pageSize) {
$("#pagin li").eq(i).hide();
}
}
let prev = $("<li/>").addClass("prev").html("Prev").click(function() {
let prevLi = $("#pagin li a.current").parent().prev().find("a");
if (prevLi[0]) {
$("#pagin li a.current").removeClass("current");
prevLi.addClass("current");
}
slide();
if (startPage != 0) {
showPage();
}
});
let next = $("<li/>").addClass("next").html("Next").click(function() {
let nextLi = $("#pagin li a.current").parent().next().find("a");
if (nextLi[0]) {
$("#pagin li a.current").removeClass("current");
nextLi.addClass("current");
}
slide();
if (startPage <= pageCount) {
showPage();
}
});
$("#pagin").prepend(prev).append(next);
$("#pagin li a").click(function() {
$('#pagin li a').removeClass('current');
$(this).addClass('current');
slide();
showPage();
});
$("#pagin li a").eq(0).addClass("current");
slide();
showPage();
</script> </script>

118
templates/zinesindex.html
View File

@ -37,37 +37,105 @@
</div> </div>
<div id="zinesindex-pagination"> <ul id="pagin" class="browsethearchive-pagination">
<ul id="zinesindex-pagin">
</ul> </ul>
</div>
<script type="text/javascript"> <script type="text/javascript">
//Pagination // pagination script w/ support from @biberman on stackoverflow - big thanks!
pageSize = 24;
var pageCount = $(".zinesindex-items").length / pageSize; let startPage;
const pageSize = 24;
for(var i = 0 ; i<pageCount;i++){ const totalSlidePage = 5;
const pageCount = Math.ceil($(".zinesindex-items").length / pageSize);
$("#zinesindex-pagin").append('<li><a href="#">'+(i+1)+'</a></li> '); const slideRange = Math.floor(totalSlidePage / 2);
}
$("#zinesindex-pagin li").first().addClass("current") slide = function() {
showPage = function(page) { startPage = $("#pagin li a.current").parent().index();
$(".zinesindex-items").hide(); let paginationStart = (startPage - slideRange) <= 1 ? 0 :
$(".zinesindex-items").each(function(n) { (startPage >= (pageCount - slideRange) ? (pageCount - totalSlidePage) :
if (n >= pageSize * (page - 1) && n < pageSize * page) (startPage - slideRange - 1));
$(this).show();
});
$("#pagin li").hide();
for (let t = paginationStart; t < (paginationStart + totalSlidePage); t++) {
$("#pagin li").eq(t + 1).show();
}
next.show();
prev.show();
if (startPage == 1) {
prev.hide();
console.log("prev?")
}
if (startPage == pageCount ) {
next.hide();
console.log("next?")
}
}
showPage = function() {
console.log(startPage);
$(".zinesindex-items").hide();
$(".zinesindex-items").each(function(n) {
if (n >= pageSize * (startPage - 1) && n < pageSize * startPage)
$(this).show();
});
}
for (let i = 0 ; i < pageCount; i++) {
$("#pagin").append('<li><a href="#">' + (i + 1) + '</a></li> ');
if (i > pageSize) {
$("#pagin li").eq(i).hide();
}
}
let prev = $("<li/>").addClass("prev").html("Prev").click(function() {
let prevLi = $("#pagin li a.current").parent().prev().find("a");
if (prevLi[0]) {
$("#pagin li a.current").removeClass("current");
prevLi.addClass("current");
} }
showPage(1); slide();
if (startPage != 0) {
showPage();
}
});
let next = $("<li/>").addClass("next").html("Next").click(function() {
let nextLi = $("#pagin li a.current").parent().next().find("a");
if (nextLi[0]) {
$("#pagin li a.current").removeClass("current");
nextLi.addClass("current");
}
slide();
if (startPage <= pageCount) {
showPage();
}
});
$("#pagin").prepend(prev).append(next);
$("#pagin li a").click(function() {
$('#pagin li a').removeClass('current');
$(this).addClass('current');
slide();
showPage();
});
$("#pagin li a").eq(0).addClass("current");
$("#zinesindex-pagin li").click(function() { slide();
$("#zinesindex-pagin li").removeClass("current"); showPage();
$(this).addClass("current");
showPage(parseInt($(this).text()))
});
</script> </script>

Write Preview
Loading…
Cancel
Save