general house cleaning on css js and html
This commit is contained in:
parent
ebf40a16e1
commit
f3b2a16b40
File diff suppressed because it is too large
Load Diff
94
static/js/paginationgrid.js
Normal file
94
static/js/paginationgrid.js
Normal file
@ -0,0 +1,94 @@
|
|||||||
|
// PAGINATION — BROWSE THE ARCHIVES PAGES — GRID LAYOUT
|
||||||
|
|
||||||
|
// pagination script w/ support from @biberman on stackoverflow - big thanks!
|
||||||
|
|
||||||
|
let startPage;
|
||||||
|
const pageSize = 24;
|
||||||
|
const totalSlidePage = 5;
|
||||||
|
const pageCount = Math.ceil($(".browsethearchive-items").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);
|
||||||
|
$(".browsethearchive-items").hide();
|
||||||
|
$(".browsethearchive-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();
|
||||||
94
static/js/paginationtable.js
Normal file
94
static/js/paginationtable.js
Normal file
@ -0,0 +1,94 @@
|
|||||||
|
// PAGINATION — BROWSE THE ARCHIVES — TABLE LAYOUT
|
||||||
|
|
||||||
|
// 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();
|
||||||
59
static/js/scripts.js
Normal file
59
static/js/scripts.js
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
// --> custom scripts
|
||||||
|
|
||||||
|
// MAIN NAVIGATION MENU — MOBILE
|
||||||
|
|
||||||
|
function showMenu(navigationmobile){
|
||||||
|
var e = document.getElementById('navigationmobile');
|
||||||
|
var element = document.getElementById("mobtop");
|
||||||
|
if(e.style.display == 'block')
|
||||||
|
e.style.display = 'none';
|
||||||
|
else
|
||||||
|
e.style.display = 'block';
|
||||||
|
document.querySelector('body').style.overflow = 'hidden';
|
||||||
|
element.classList.toggle("mob-close-icon");
|
||||||
|
}
|
||||||
|
|
||||||
|
// HOMEPAGE — RECENTLY ADDED ITEMS GRID
|
||||||
|
|
||||||
|
$ShowHideMore = $('#home-recent-grid');
|
||||||
|
$ShowHideMore.each(function() {
|
||||||
|
var $times = $(this).children('.home-recent-items');
|
||||||
|
if ($times.length > 13) {
|
||||||
|
$ShowHideMore.children(':nth-of-type(n+13)').addClass('moreShown').hide();
|
||||||
|
$(this).find('span.home-show').addClass('more-times').html('SHOW MORE');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$(document).on('click', '#home-recent-grid > span', function() {
|
||||||
|
var that = $(this);
|
||||||
|
var thisParent = that.closest('#home-recent-grid');
|
||||||
|
if (that.hasClass('more-times')) {
|
||||||
|
thisParent.find('.moreShown').show();
|
||||||
|
that.toggleClass('more-times', 'less-times').html('SHOW LESS');
|
||||||
|
} else {
|
||||||
|
thisParent.find('.moreShown').hide();
|
||||||
|
that.toggleClass('more-times', 'less-times').html('SHOW MORE');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// SLIDER — ARTWORK TEMPLATE
|
||||||
|
|
||||||
|
var slider = tns({
|
||||||
|
container: '.my-slider',
|
||||||
|
items: 1,
|
||||||
|
responsive: {
|
||||||
|
640: {
|
||||||
|
edgePadding: 20,
|
||||||
|
gutter: 20,
|
||||||
|
items: 1
|
||||||
|
},
|
||||||
|
700: {
|
||||||
|
gutter: 30
|
||||||
|
},
|
||||||
|
900: {
|
||||||
|
items: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
@ -473,26 +473,10 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- SLIDER SCRIPTS -->
|
||||||
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script src="{{ url_for('static', filename='/js/scripts.js') }}" type="text/javascript"></script>
|
||||||
var slider = tns({
|
|
||||||
container: '.my-slider',
|
|
||||||
items: 1,
|
|
||||||
responsive: {
|
|
||||||
640: {
|
|
||||||
edgePadding: 20,
|
|
||||||
gutter: 20,
|
|
||||||
items: 1
|
|
||||||
},
|
|
||||||
700: {
|
|
||||||
gutter: 30
|
|
||||||
},
|
|
||||||
900: {
|
|
||||||
items: 1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
{% endblock content %}
|
{% endblock content %}
|
||||||
@ -200,28 +200,11 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- SLIDER SCRIPTS -->
|
||||||
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script src="{{ url_for('static', filename='/js/scripts.js') }}" type="text/javascript"></script>
|
||||||
var slider = tns({
|
|
||||||
container: '.my-slider',
|
|
||||||
items: 1,
|
|
||||||
responsive: {
|
|
||||||
640: {
|
|
||||||
edgePadding: 20,
|
|
||||||
gutter: 20,
|
|
||||||
items: 1
|
|
||||||
},
|
|
||||||
700: {
|
|
||||||
gutter: 30
|
|
||||||
},
|
|
||||||
900: {
|
|
||||||
items: 1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
{% endblock content %}
|
{% endblock content %}
|
||||||
@ -22,14 +22,6 @@
|
|||||||
<a id="wrapper-top-buttons" class="primary-button" href="{{ url_for('browsethearchive') }}">BROWSE THE ARCHIVE FROM A-Z</a>
|
<a id="wrapper-top-buttons" class="primary-button" href="{{ url_for('browsethearchive') }}">BROWSE THE ARCHIVE FROM A-Z</a>
|
||||||
<a id="wrapper-top-buttons" class="secondary-button" href="{{ url_for('casestudy') }}">CAROLEE SCHNEEMANN CASE STUDY</a>
|
<a id="wrapper-top-buttons" class="secondary-button" href="{{ url_for('casestudy') }}">CAROLEE SCHNEEMANN CASE STUDY</a>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div id="wrapper-vid">
|
|
||||||
<video preload="meta" autoplay="" loop="">
|
|
||||||
<source src="{{ url_for('static', filename='/vid/DAAP_video_reduced.mp4') }}" type="video/mp4">
|
|
||||||
</video>
|
|
||||||
<p>
|
|
||||||
<a class="metadata-link" target="_blank" href="http://query.daap.bannerrepeater.org/embed.html#%23defaultView%3AGraph%0ASELECT%20%3Fwork%20%3FworkLabel%20%3Fimage_on_Commons%20%3Fplace_of_publication%20%3Fplace_of_publicationLabel%20%3Fcreator_of%20%3Fcreator_ofLabel%20WHERE%20%7B%0A%20%20SERVICE%20wikibase%3Alabel%20%7B%20bd%3AserviceParam%20wikibase%3Alanguage%20%22%5BAUTO_LANGUAGE%5D%2Cen%22.%20%7D%0A%20%20%3Fwork%20wdt%3AP9%20wd%3AQ421.%0A%20%20OPTIONAL%20%7B%20%3Fwork%20wdt%3AP31%20%3Fimage_on_Commons.%20%7D%0A%20%20OPTIONAL%20%7B%20%3Fwork%20wdt%3AP12%20%3Fplace_of_publication.%20%7D%0A%20%20OPTIONAL%20%7B%20%3Fwork%20wdt%3AP9%20%3Fcreator_of.%20%7D%0A%7D%0ALIMIT%20100">See Live Data Visualization</a>
|
|
||||||
</p>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="scroll-down"><span>Scroll Down</span></div>
|
<div class="scroll-down"><span>Scroll Down</span></div>
|
||||||
@ -82,7 +74,6 @@
|
|||||||
|
|
||||||
<!--
|
<!--
|
||||||
|
|
||||||
|
|
||||||
post_wrap =
|
post_wrap =
|
||||||
home-recent-grid
|
home-recent-grid
|
||||||
|
|
||||||
@ -91,30 +82,9 @@ home-recent-items
|
|||||||
|
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<script type="text/javascript">
|
<!-- RECENTLY ADDED ITEMS SCRIPT -->
|
||||||
$ShowHideMore = $('#home-recent-grid');
|
|
||||||
$ShowHideMore.each(function() {
|
|
||||||
var $times = $(this).children('.home-recent-items');
|
|
||||||
if ($times.length > 13) {
|
|
||||||
$ShowHideMore.children(':nth-of-type(n+13)').addClass('moreShown').hide();
|
|
||||||
$(this).find('span.home-show').addClass('more-times').html('SHOW MORE');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$(document).on('click', '#home-recent-grid > span', function() {
|
<script src="{{ url_for('static', filename='/js/scripts.js') }}" type="text/javascript"></script>
|
||||||
var that = $(this);
|
|
||||||
var thisParent = that.closest('#home-recent-grid');
|
|
||||||
if (that.hasClass('more-times')) {
|
|
||||||
thisParent.find('.moreShown').show();
|
|
||||||
that.toggleClass('more-times', 'less-times').html('SHOW LESS');
|
|
||||||
} else {
|
|
||||||
thisParent.find('.moreShown').hide();
|
|
||||||
that.toggleClass('more-times', 'less-times').html('SHOW MORE');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
{% endblock content %}
|
{% endblock content %}
|
||||||
@ -547,27 +547,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- END OF OVERALL BLOCK -->
|
<!-- END OF OVERALL BLOCK -->
|
||||||
|
|
||||||
|
<!-- SLIDER SCRIPTS -->
|
||||||
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script src="{{ url_for('static', filename='/js/scripts.js') }}" type="text/javascript"></script>
|
||||||
var slider = tns({
|
|
||||||
container: '.my-slider',
|
|
||||||
items: 1,
|
|
||||||
responsive: {
|
|
||||||
640: {
|
|
||||||
edgePadding: 20,
|
|
||||||
gutter: 20,
|
|
||||||
items: 1
|
|
||||||
},
|
|
||||||
700: {
|
|
||||||
gutter: 30
|
|
||||||
},
|
|
||||||
900: {
|
|
||||||
items: 1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
{% endblock content %}
|
{% endblock content %}
|
||||||
@ -115,29 +115,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script type="text/javascript">
|
<!-- MENU SCRIPT -->
|
||||||
|
|
||||||
|
|
||||||
function showMenu(navigationmobile){
|
|
||||||
var e = document.getElementById('navigationmobile');
|
|
||||||
var element = document.getElementById("mobtop");
|
|
||||||
if(e.style.display == 'block')
|
|
||||||
e.style.display = 'none';
|
|
||||||
else
|
|
||||||
e.style.display = 'block';
|
|
||||||
document.querySelector('body').style.overflow = 'hidden';
|
|
||||||
element.classList.toggle("mob-close-icon");
|
|
||||||
}
|
|
||||||
|
|
||||||
// element.classList.add("mobile-nav-icon");
|
|
||||||
// element.classList.remove("mob-close-icon");
|
|
||||||
|
|
||||||
|
|
||||||
// element.classList.remove("mobile-nav-icon");
|
|
||||||
// element.classList.add("mob-close-icon");
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
|
<script src="{{ url_for('static', filename='/js/scripts.js') }}" type="text/javascript"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -42,110 +42,12 @@
|
|||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<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($(".browsethearchive-items").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);
|
|
||||||
$(".browsethearchive-items").hide();
|
|
||||||
$(".browsethearchive-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>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- PAGINATION SCRIPT -->
|
||||||
|
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
||||||
|
|
||||||
|
<script src="{{ url_for('static', filename='/js/paginationgrid.js') }}" type="text/javascript"></script>
|
||||||
|
|
||||||
{% endblock content %}
|
{% endblock content %}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -63,109 +63,10 @@
|
|||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
|
<!-- PAGINATION 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 src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script src="{{ url_for('static', filename='/js/paginationtable.js') }}" type="text/javascript"></script>
|
||||||
|
|
||||||
// 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 %}
|
||||||
Loading…
Reference in New Issue
Block a user