Back to demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title></title>
<link rel="icon" href="Favicon.icns" type="image/icns" sizes="16x16">
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<!-- JQUERY -->
<script type="text/javascript" src="assets/js/vendors/jquery.min.js"></script>
<!-- BOOTSTRAP -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<script type="text/javascript" src="assets/js/vendors/bootstrap.min.js"></script>
<!-- my stuff -->
<link rel="stylesheet" type="text/css" href="assets/css/styles.css">
<script type="text/javascript" src="assets/js/vendors/get-json.js"></script>
</head>
<body>
<section>
<div class="container">
<article class="post">
<header>
<div id="perRowSection">
</div>
<div id="tempLoadGif">
</div>
<div id="makeHeader">
</div>
</header>
<div id="newRows">
</div>
<div class="clearfix"></div>
<div class="center-ul">
<ul class="pagination justify-content-center"" id="pagination">
</ul>
</div>
</article>
</div>
</section>
<footer>
</footer>
<script type="text/javascript">
/* page must load first, to initialize the following vars */
var perRowSection = document.getElementById("perRowSection");
var pagination = document.getElementById("pagination");
var newRows = document.getElementById("newRows");
var makeHeader = document.getElementById("makeHeader");
var tempLoadGif = document.getElementById("tempLoadGif");
</script>
/***************************/
/* init variables
/***************************/
var Obj = {};
var countRows = {};
var pages = 0;
var rowsPerPage = 0;
var rows = 0;
var rowSegments = [];
var columns = [];
var start = 0;
var end = 0;
var countBtns = 0;
var paginationArr = [];
var thirtiethRemainder = 0;
var tenthRemainder = 0;
var sixthRemainder = 0;
var thirdRemainder = 0;
var selection;
var trackSelectionValue = 10;
var expr = "http"; // expression for checking for links
var data = "";
var startPaginationArr = [1, 1];
var endPaginationArr = [10, 10];
var remainderPage = 10;
/***************************/
/* your table cannot have any missing indexes or you will receive the following error
/* Obj[y] is undefined
/**************************/
/***************************/
/* fetch JSON
/***************************/
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// console.log(JSON.stringify(this.responseText));
Obj = JSON.parse(this.responseText);
countRows = Object.keys(Obj).map(function(key) {
return [Number(key), Obj[key]];
});
columns = Object.keys(
Obj.reduce(function(result, obj) {
return Object.assign(result, obj);
}, {})
);
// console.log("columns: " + columns);
// console.log(countRows.length);
rows = countRows.length;
// keep track of remainder rows
switch (rows) {
case rows % 30 != 0:
thirtiethRemainder = rows % 30;
break;
case rows % 10 != 0:
tenthRemainder = rows % 10;
break;
case rows % 6 != 0:
sixthRemainder = rows % 6;
break;
case rows % 3 != 0:
thirdRemainder = rows % 3;
break;
default:
break;
}
// a 30th of the rows, a 10th of the rows, a 6th and a 3rd of the rows
rowSegments = [
rows % 30 != 0 ? Math.round(rows / 30) : Math.floor(rows / 30),
rows % 10 != 0 ? Math.round(rows / 10) : Math.floor(rows / 10),
rows % 6 != 0 ? Math.round(rows / 6) : Math.floor(rows / 6),
rows % 3 != 0 ? Math.round(rows / 3) : Math.floor(rows / 3)
];
rowsPerPage = rowSegments[1];
pages = rows / rowsPerPage;
pages = Math.round(pages);
// fill paginationArr with values
paginationArr = [];
for (v = 1; v <= pages; v++) {
paginationArr.push(v);
}
// console.log("paginationArr: " + JSON.stringify(paginationArr));
// console.log("pages: " + pages);
createRowsPerPageSelection();
getColumnHeaders();
loadGif();
createRows(Obj, rowsPerPage);
createPaginationBtns();
}
};
xmlhttp.open("GET", "assets/js/vendors/getJson.pdo.php", true);
xmlhttp.send();
var getColumnHeaders = function() {
makeHeader.innerHTML = "";
var makeHeaderDiv = document.createElement("div");
makeHeaderDiv.setAttribute("class", "non-stripped header");
var ul = document.createElement("ul");
for (var m = 0; m < columns.length; m++) {
ul.setAttribute("class", "list-inline");
ul.innerHTML += "" + columns[m] + " ";
makeHeaderDiv.appendChild(ul);
}
makeHeader.appendChild(makeHeaderDiv);
};
var reloadObj = function(num) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
Obj = JSON.parse(this.responseText);
countRows = Object.keys(Obj).map(function(key) {
return [Number(key), Obj[key]];
});
columns = Object.keys(
Obj.reduce(function(result, obj) {
return Object.assign(result, obj);
}, {})
);
// console.log("columns: " + columns);
// console.log(countRows.length);
rows = countRows.length;
// keep track of remainder rows
switch (rows) {
case rows % 30 != 0:
thirtiethRemainder = rows % 30;
break;
case rows % 10 != 0:
tenthRemainder = rows % 10;
break;
case rows % 6 != 0:
sixthRemainder = rows % 6;
break;
case rows % 3 != 0:
thirdRemainder = rows % 3;
break;
default:
break;
}
// a 30th of the rows, a 10th of the rows, a 6th and a 3rd of the rows
rowSegments = [
rows % 30 != 0 ? Math.round(rows / 30) : Math.floor(rows / 30),
rows % 10 != 0 ? Math.round(rows / 10) : Math.floor(rows / 10),
rows % 6 != 0 ? Math.round(rows / 6) : Math.floor(rows / 6),
rows % 3 != 0 ? Math.round(rows / 3) : Math.floor(rows / 3)
];
// console.log("rows: " + rows);
pages = rows / rowsPerPage;
pages = Math.round(pages);
// fill paginationArr with values
paginationArr = [];
for (w = 1; w <= pages; w++) {
paginationArr.push(w);
}
// console.log(JSON.stringify(paginationArr));
// console.log("pages: " + pages);
var selection = document.getElementById("rowsPerPageSelect").value;
newRows.innerHTML = "";
pagination.innerHTML = "";
selection == ""
? (rowsPerPage = rowSegments[1])
: (rowsPerPage = selection);
getColumnHeaders();
// console.log("rowsPerPage: " + rowsPerPage);
calculateStartEnd(num);
loadGif();
createRowsWithStartAndEnd(Obj, start, end, num);
createPaginationBtns(num);
}
};
xmlhttp.open("GET", "assets/js/vendors/getJson.pdo.php", true);
xmlhttp.send();
};
var getEndId = function(Obj, start, num) {
// parseInt(start) + parseInt(rowsPerPage)
var startId = Obj[start]["id"];
var preventConcat = eval(eval(start) + eval(rowsPerPage));
var endId = 0;
// console.log("preventConcat: " + preventConcat + " rows: " + rows);
if (preventConcat < parseInt(rows) && num == endPaginationArr[1]) {
endId = parseInt(rows);
} else {
endId = preventConcat;
}
// console.log("endId: " + endId);
return endId;
};
var calculateStartEnd = function(num) {
pages = countRows.length / rowsPerPage;
pages = Math.round(pages);
start = (parseInt(num) - parseInt(1)) * parseInt(rowsPerPage);
/* console.log(
"num: " + num + " rowsPerPage + 1: " + (parseInt(rowsPerPage) + parseInt(1))
); */
if (num == pages) {
end = getEndId(Obj, start, num);
} else {
end = parseInt(parseInt(start) + parseInt(rowsPerPage));
}
};
/***************************/
/* function resetPage
/* just as name implies
/***************************/
var resetPage = function() {
selection = document.getElementById("rowsPerPageSelect").value;
// console.log(selection);
newRows.innerHTML = "";
pagination.innerHTML = "";
if (rowsPerPage && !selection) {
selection = rowsPerPage;
trackSelectionValue = rowsPerPage;
} else {
rowsPerPage = selection;
trackSelectionValue = selection;
}
// console.log("rows: " + rows + "pages: " + pages);
pages = rows / rowsPerPage;
pages = Math.round(pages);
// fill paginationArr with values
paginationArr = [];
for (r = 1; r <= pages; r++) {
paginationArr.push(r);
}
// console.log(JSON.stringify(paginationArr));
loadGif();
createRows(Obj, rowsPerPage);
createPaginationBtns();
};
/***************************/
/* function setActivePgBtn
/* just as name implies
/***************************/
var setActivePgBtn = function(num) {
// console.log(num);
reloadObj(num);
};
/****************************/
/* function createRowsPerPageSelection
/* creates the select options
/* which determine how many rows per page
/* will be displayed of the
/* JSON object and, in turn, determines
/* how many pages will be displayed,
/* along with how many pagination buttons
/* be displayed
/***************************/
var createRowsPerPageSelection = function() {
var rowsPerPageSelection = document.createElement("select");
rowsPerPageSelection.setAttribute("id", "rowsPerPageSelect");
rowsPerPageSelection.setAttribute("onchange", "resetPage()");
var options = document.createElement("option");
options.setAttribute("select", "selected");
options.setAttribute("value", "");
options.innerHTML = "Select rows per page";
rowsPerPageSelection.appendChild(options);
for (var z = 0; z < rowSegments.length; z++) {
options = document.createElement("option");
switch (z) {
case 0:
options.setAttribute("value", Math.round(rows / 30));
options.innerHTML = rowSegments[z] + " - 30th of data";
break;
case 1:
options.setAttribute("value", Math.round(rows / 10));
options.innerHTML = rowSegments[z] + " - 10th of data";
break;
case 2:
options.setAttribute("value", Math.round(rows / 6));
options.innerHTML = rowSegments[z] + " - 6th of data";
break;
case 3:
options.setAttribute("value", Math.round(rows / 3));
options.innerHTML = rowSegments[z] + " - 3rd of data";
break;
default:
break;
}
rowsPerPageSelection.appendChild(options);
}
perRowSection.appendChild(rowsPerPageSelection);
};
/****************************/
/* function createPaginationBtns
/* creates the pagination buttons
/* depending on how many pages have
/* been calculated by the size of
/* JSON object and the rows per page selected
/***************************/
var createPaginationBtns = function(num = 0) {
// first li
var pli;
pli = document.createElement("li");
if (num >= 2) {
startPaginationArr[0] = 1;
} else {
startPaginationArr[0] = 1;
}
if (num >= 2) {
} else {
pli.setAttribute("class", "disabled");
}
plia = document.createElement("a");
plia.setAttribute(
"onClick",
"javascript:setActivePgBtn(" + startPaginationArr[0] + ")"
);
var plia = document.createElement("a");
plia.setAttribute(
"onClick",
"javascript:setActivePgBtn(" + startPaginationArr[0] + ")"
);
plia.setAttribute("href", "javascript://");
plia.innerHTML = "«";
pli.appendChild(plia);
pagination.appendChild(pli);
// second li
pli;
pli = document.createElement("li");
if (num >= 0) {
startPaginationArr[1] = parseInt(num) - parseInt(1);
endPaginationArr[0] = parseInt(num) - parseInt(1);
} else {
startPaginationArr[1] = parseInt(num);
}
if (startPaginationArr[1] < 1) {
pli.setAttribute("class", "disabled");
} else {
}
plia = document.createElement("a");
plia.setAttribute(
"onClick",
"javascript:setActivePgBtn(" + startPaginationArr[1] + ")"
);
plia.setAttribute("href", "javascript://");
plia.innerHTML = "<";
pli.appendChild(plia);
pagination.appendChild(pli);
for (var x = 1; x < pages; x++) {
// console.log("paginationArr[x]: " + paginationArr[x]);
pli = document.createElement("li");
if (num == 0 && x == 1) {
pli.setAttribute("class", "active");
pli.setAttribute("id", "pagination-li-" + x);
} else if (x == num) {
pli.setAttribute("class", "active");
pli.setAttribute("id", "pagination-li-" + x);
} else {
pli.setAttribute("id", "pagination-li-" + x);
}
plia = document.createElement("a");
plia.setAttribute("onClick", "javascript:setActivePgBtn(" + x + ")");
plia.setAttribute("href", "javascript://");
plia.innerHTML = x;
pli.appendChild(plia);
pagination.appendChild(pli);
}
// create button for the remainder rows
remainderPage = Math.round(rows / rowsPerPage);
oneMorePaginationBtn(num);
// second to last li
pli = document.createElement("li");
if (num < remainderPage) {
if (num == 0) {
endPaginationArr[0] = parseInt(num) + parseInt(2);
} else {
endPaginationArr[0] = parseInt(num) + parseInt(1);
startPaginationArr[1] = parseInt(num) + parseInt(1);
}
} else {
endPaginationArr[0] = parseInt(num) + parseInt(1);
}
if (endPaginationArr[0] > remainderPage) {
pli.setAttribute("class", "disabled");
pli.setAttribute("id", "pagination-li-" + endPaginationArr[0]);
} else {
pli.setAttribute("id", "pagination-li-" + endPaginationArr[0]);
}
var plia = document.createElement("a");
plia.setAttribute(
"onClick",
"javascript:setActivePgBtn(" + endPaginationArr[0] + ")"
);
plia.setAttribute("href", "javascript://");
plia.innerHTML = ">";
pli.appendChild(plia);
pagination.appendChild(pli);
// last li
pli = document.createElement("li");
if (num < remainderPage) {
endPaginationArr[1] = remainderPage;
} else {
endPaginationArr[1] = parseInt(remainderPage) + parseInt(1);
}
if (endPaginationArr[1] > remainderPage) {
pli.setAttribute("class", "disabled");
pli.setAttribute("id", "pagination-li-" + endPaginationArr[1]);
} else {
pli.setAttribute("id", "pagination-li-" + endPaginationArr[1]);
}
plia = document.createElement("a");
plia.setAttribute(
"onClick",
"javascript:setActivePgBtn(" + endPaginationArr[1] + ")"
);
plia.setAttribute("href", "javascript://");
plia.innerHTML = "»";
pli.appendChild(plia);
pagination.appendChild(pli);
};
/***************************/
/* function oneMorePaginationBtn creates one more button for remainders
/**************************/
var oneMorePaginationBtn = function(num) {
// console.log("remainderPage: " + remainderPage);
pli = document.createElement("li");
if (num == remainderPage) {
pli.setAttribute("class", "active");
} else {
}
pli.setAttribute("id", "pagination-li-" + remainderPage);
plia = document.createElement("a");
plia.setAttribute(
"onClick",
"javascript:setActivePgBtn(" + remainderPage + ")"
);
plia.setAttribute("href", "javascript://");
plia.innerHTML = remainderPage;
pli.appendChild(plia);
pagination.appendChild(pli);
};
/***************************/
/* function createRows
/* name explains functionality
/***************************/
var createRows = function(Obj, rowsPerPage) {
var divRows, divRowsChild;
for (var y = 0; y < rowsPerPage - 1; y++) {
divRows = document.createElement("div");
divRowsChild = document.createElement("ul");
divRowsChild.setAttribute("class", "list-inline");
for (var u = 0; u < columns.length; u++) {
if (y % 2 == 0) {
divRows.setAttribute("class", "stripped");
if (Obj[y][columns[u]]) {
data = Obj[y][columns[u]];
// console.log("data.substring(0, 4): " + data.substring(0, 4));
if (data.substring(0, 4) == expr) {
divRowsChild.innerHTML +=
"" +
columns[u] +
" ";
} else {
divRowsChild.innerHTML +=
"" +
getSnippet(Obj[y][columns[u]], 10, "original_band") +
" ";
}
} else {
divRowsChild.innerHTML +=
" ";
}
divRows.appendChild(divRowsChild);
} else {
divRows.setAttribute("class", "non-stripped");
if (Obj[y][columns[u]]) {
data = Obj[y][columns[u]];
if (data.substring(0, 4) == expr) {
divRowsChild.innerHTML +=
"" +
columns[u] +
" ";
} else {
divRowsChild.innerHTML +=
"" +
getSnippet(Obj[y][columns[u]], 10, "original_band") +
" ";
}
} else {
divRowsChild.innerHTML +=
" ";
}
divRows.appendChild(divRowsChild);
}
newRows.appendChild(divRows);
unLoadGif();
}
}
afterLoading();
};
/***************************/
/* function createRowsWithStartAndEnd
/* name explains functionality
/***************************/
var createRowsWithStartAndEnd = function(Obj, start, end, num) {
var divRows, divRowsChild;
var activeBtn = num;
start = Math.floor(start);
// console.log("start: " + start + "end: " + end + "num: " + num);
if (typeof Obj[end] == "undefined") {
end = rows;
} else {
end = Math.floor(end);
}
for (var y = start; y < end; y++) {
divRows = document.createElement("div");
divRowsChild = document.createElement("ul");
divRowsChild.setAttribute("class", "list-inline");
for (var u = 0; u < columns.length; u++) {
if (y % 2 == 0) {
divRows.setAttribute("class", "stripped");
if (Obj[y][columns[u]]) {
data = Obj[y][columns[u]];
if (data.substring(0, 4) == expr) {
divRowsChild.innerHTML +=
"" +
columns[u] +
" ";
} else {
divRowsChild.innerHTML +=
"" +
getSnippet(Obj[y][columns[u]], 10, "original_band") +
" ";
}
} else {
divRowsChild.innerHTML +=
" ";
}
divRows.appendChild(divRowsChild);
} else {
divRows.setAttribute("class", "non-stripped");
if (Obj[y][columns[u]]) {
data = Obj[y][columns[u]];
if (data.substring(0, 4) == expr) {
divRowsChild.innerHTML +=
"" +
columns[u] +
" ";
} else {
divRowsChild.innerHTML +=
"" +
getSnippet(Obj[y][columns[u]], 10, "original_band") +
" ";
}
} else {
divRowsChild.innerHTML +=
" ";
}
divRows.appendChild(divRowsChild);
}
newRows.appendChild(divRows);
unLoadGif();
}
}
afterLoading();
};
/***************************/
/* function getSnippet
/* return snippet of description, titles and band names
/***************************/
var getSnippet = function(str, len, divName = "description") {
if (str.length > len && divName == "description") {
str = str.substring(0, 49) + "...";
return str;
} else if (str.length > len && divName == "original_band") {
str = str.substring(0, 10) + "...";
return str;
} else if (str.length > len) {
str = str.substring(0, 24) + "...";
return str;
} else {
return str;
}
};
/*****************************/
/* function afterLoading
/****************************/
var afterLoading = function() {
$(document).ready(function() {
$("li span a").each(function() {
switch ($(this).text()) {
case "download_midi_tabs":
$(this).addClass("mZip");
break;
case "youtube_link":
$(this).addClass("mYouTube");
break;
case "download_guitar_m4v":
$(this).addClass("volume");
break;
default:
break;
}
$(this).css("padding-left", "1.5em");
});
});
};
var loadGif = function() {
tempLoadGif.innerHTML =
"
";
document.getElementById("loadMGif").style.display = "block";
};
var unLoadGif = function() {
setTimeout(function() {
document.getElementById("loadMGif").style.display = "none";
}, 300);
};
<?php
require_once('includes/songs.pdo.inc.php');
class ViewSongsPdo extends SongsPdo {
public function showAllSongs() {
$datas = $this->getAllSongs();
$myJSON = json_encode( $datas );
echo stripslashes( $myJSON );
}
}
$songs = new ViewSongsPdo();
$songs->showAllSongs();
<?php
require_once('dbh.pdo.inc.php');
class SongsPdo extends DbhPdo {
protected function getAllSongs() {
try{
$stmt = $this->connect()->query('select * from songs_new');
return $stmt->fetchAll(PDO::FETCH_ASSOC);
}catch (PDOException $e){
echo 'Message: ' . $e->getMessage();
}
}
}
<?php
class DbhPdo {
private $servername;
private $username;
private $pwd;
private $dbname;
protected function connect() {
$this->servername = "localhost";
$this->username = "username";
$this->pwd = "pswd";
$this->dbname = "db";
$this->charset = "utf8mb4";
try{
$dsn = "mysql:host=" . $this->servername . ";dbname=" . $this->dbname . ";charset=" . $this->charset;
$pdo = new PDO($dsn, $this->username, $this->pwd);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
return $pdo;
} catch(PDOException $e) {
echo "Message: " . $e->getMessage();
}
}
}