Previous/next pagination working

This commit is contained in:
Kasper Rynning-Tønnesen
2019-03-02 13:23:57 +01:00
parent af92dd0e3a
commit 1c05a1c3b2
6 changed files with 72 additions and 12 deletions

View File

@@ -383,6 +383,14 @@ li.disabled span {
margin-top: 5px;
}
.filter-pagination-container {
display: flex;
justify-content: space-evenly;
padding-top: 15px;
width: 50%;
margin: auto;
}
.extra-button{
margin: 0 4px !important;
padding: 0px !important;

View File

@@ -21,7 +21,7 @@ function removeAllListeners() {
socket.removeEventListener(id);
}
function filterPlaylistElements() {
function filterPlaylistElements(page) {
Helper.ajax({
type: "POST",
headers: {
@@ -30,14 +30,28 @@ function filterPlaylistElements() {
url: "/api/search/" + chan.toLowerCase(),
data: {
searchQuery: document.getElementById("filtersearch_input").value,
token: zoff_api_token
token: zoff_api_token,
page: page
},
success: function(data){
var json = JSON.parse(data);
document.querySelector(".filter-results").innerHTML = "";
if(json.results.length > 0) {
for(var i = 0; i < json.results.length; i++) {
document.querySelector(".filter-results").innerHTML += List.generateSong(json.results[i], false, false, true, false, "block", false, true);;
if(json.results.search_results.length > 0) {
for(var i = 0; i < json.results.search_results.length; i++) {
document.querySelector(".filter-results").innerHTML += List.generateSong(json.results.search_results[i], false, false, true, false, "block", false, true);;
}
if(json.results.next != undefined || json.results.prev != undefined) {
document.querySelector(".filter-results").innerHTML += "<div class='filter-pagination-container'></div>"
if(json.results.prev != undefined) {
document.querySelector(".filter-pagination-container").innerHTML += "<a href='#' class='btn orange prev-filter' data-page='" + json.results.prev + "'>Prev</a>";
} else {
document.querySelector(".filter-pagination-container").innerHTML += "<a href='#' class='btn orange disabled'>Prev</a>";
}
if(json.results.next != undefined) {
document.querySelector(".filter-pagination-container").innerHTML += "<a href='#' class='btn orange next-filter' data-page='" + json.results.next + "'>Next</a>";
} else {
document.querySelector(".filter-pagination-container").innerHTML += "<a href='#' class='btn orange disabled'>Next</a>";
}
}
} else {
toast("Couldn't find any items with those tags..", "red");

View File

@@ -697,12 +697,28 @@ function addDynamicListeners() {
addListener("submit", "#filter-form", function(e) {
this.preventDefault();
filterPlaylistElements();
filterPlaylistElements(1);
});
addListener("click", ".submit-filter-search", function(e) {
this.preventDefault();
filterPlaylistElements();
filterPlaylistElements(1);
});
addListener("click", ".next-filter", function(e) {
this.preventDefault();
var page = e.getAttribute("data-page");
page = parseInt(page);
if(page == undefined || isNaN(page)) return;
filterPlaylistElements(page);
});
addListener("click", ".prev-filter", function(e) {
this.preventDefault();
var page = e.getAttribute("data-page");
page = parseInt(page);
if(page == undefined || isNaN(page)) return;
filterPlaylistElements(page);
});
addListener("click", ".delete-context-menu", function(e) {