The page is here for reference: https://songscape-helgasonpete.replit.app/artist/clarencewilliams.html
I have two tables that are activated by hitting the two buttons. But I want to be able to sort the information within those two tables. So under the “songs as writer” button – I want to be able to sort the information under the “Song” “Writer” “Originally By” headers alphabetically and information under the “Original Release” header by date.
Likewise under the “Songs as Performer” button – I want to be able to sort the information under the “Title” and “Performer” headers alphabetically, the information under the “Release Date” by date and the information under the “Streamcount” header numerically.
I tried creating two tables of differing data similar to the table I did on this link here: https://songscape-helgasonpete.replit.app/artist/bessiesmith.html. The table would be button activated.
I was able to get the buttons work, but I was unable to sort the table once I clicked on it. Here is the code for reference:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clarence Williams</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
th {
color: white;
}
</style>
</head>
<body>
<h1>Clarence Williams</h1>
<img src="/images/clarencewilliams.jpg"><br>
Born: October 8, 1898<br>
Died: November 6, 1965<br>
Rankings: <br>
<a href="https://songscape-helgasonpete.replit.app/statistics/writers.html">1st</a> most streamed writer<br>
<a href="https://songscape-helgasonpete.replit.app/statistics/performers.html">2nd</a> most streamed performer<br>
<button type="button" onclick="updateDisplay('demo')">Songs As Writer</button>
<button type="button" onclick="updateDisplay('demo2')">Songs As Performer</button>
<table id="demo" style="display:none" class="specialTable table table-striped">
<tr class="bg-info">
<th id="songCol">Song</th>
<th id="writerCol">Writer</th>
<th id="originalperformerCol">Originally By</th>
<th id="releaseCol">Original Release</th>
</tr>
<tr>
<td><a href="https://songscape-helgasonpete.replit.app/work/gulfcoastblues.html">Gulf Coast Blues</a></td>
<td><a href="https://songscape-helgasonpete.replit.app/artist/clarencewilliams.html">Clarence Williams</a></td>
<td><a href="https://songscape-helgasonpete.replit.app/artist/bessiesmith+clarencewilliams.html">Bessie Smith - Clarence Williams at the Piano</a></td>
<td>May 1923</td>
</tr>
<tr>
<td><a href="https://songscape-helgasonpete.replit.app/work/babywontyoupleasecomehome.html">Baby, Won't You Please Come Home</a></td>
<td><a href="https://songscape-helgasonpete.replit.app/artist/charleswarfield.html">Charles Warfield</a> <a href="https://songscape-helgasonpete.replit.app/artist/clarencewilliams.html">Clarence Williams</a></td>
<td><a href="https://songscape-helgasonpete.replit.app/artist/bessiesmith+clarencewilliams.html">Bessie Smith - Clarence Williams at the Piano</a></td>
<td>June 1923</td>
</tr>
</table>
<table id="demo2" style="display:none" class="specialTable table table-striped">
<tr class="bg-info">
<th id="titleCol">Title</th>
<th id="performerCol">Performer</th>
<th id="releasetwoCol">Release Date</th>
<th id="streamCol">Stream Count</th>
</tr>
<tr>
<td><a href="https://songscape-helgasonpete.replit.app/performance/downheartedblues.html">Down Hearted Blues</a></td>
<td><a href="https://songscape-helgasonpete.replit.app/artist/bessiesmith+clarencewilliams.html">Bessie Smith - Clarence Williams at the Piano</a></td>
<td><a href="https://songscape-helgasonpete.replit.app/statistics/1923releases.html">May 1923</a></td>
<td>1294462</td>
</tr>
<tr>
<td><a href="https://songscape-helgasonpete.replit.app/performance/gulfcoastblues.html">Gulf Coast Blues</a></td>
<td><a href="https://songscape-helgasonpete.replit.app/artist/bessiesmith+clarencewilliams.html">Bessie Smith - Clarence Williams at the Piano</a></td>
<td><a href="https://songscape-helgasonpete.replit.app/statistics/1923releases.html">May 1923</a></td>
<td>89052</td>
</tr>
<tr>
<td><a href="https://songscape-helgasonpete.replit.app/performance/babywontyoupleasecomehome.html">Baby Won't You Please Come Home Blues</a></td>
<td><a href="https://songscape-helgasonpete.replit.app/artist/bessiesmith+clarencewilliams.html">Bessie Smith - Clarence Williams at the Piano</a></td>
<td><a href="https://songscape-helgasonpete.replit.app/statistics/1923releases.html">June 1923</a></td>
<td>1832242</td>
</tr>
<tr>
<td><a href="https://songscape-helgasonpete.replit.app/performance/ohdaddyblues.html">Oh Daddy Blues</a></td>
<td><a href="https://songscape-helgasonpete.replit.app/artist/bessiesmith+clarencewilliams.html">Bessie Smith - Clarence Williams at the Piano</a></td>
<td><a href="https://songscape-helgasonpete.replit.app/statistics/1923releases.html">June 1923</a></td>
<td>37590</td>
</tr>
</table>
<script>
// Create a function to update your display area
function updateDisplay(tableId) {
// The function receives the id of the table to show (give each table a unique id, but the same class)
// Set the display value of all tables with the target class to none
document.querySelectorAll(".specialTable").forEach(el => {
el.style.display = "none";
});
// Set the display value of the table with the target id to block
document.getElementById(tableId).style.display = "block";
$('#songCol').on('click', async function () {
let newSortOrder;
sortKey = "Song";
if (lastSortOrder != "asc") {
newSortOrder = "asc";
} else {
newSortOrder = "desc";
}
myArray = await performSort(myArray, sortKey, newSortOrder);
buildtable(myArray);
});
$('#writerCol').on('click', async function () {
let newSortOrder;
sortKey = "Writer";
if (lastSortOrder != "asc") {
newSortOrder = "asc";
} else {
newSortOrder = "desc";
}
myArray = await performSort(myArray, sortKey, newSortOrder);
buildtable(myArray);
});
$('#originalperformerCol').on('click', async function () {
let newSortOrder;
sortKey = "Originally By";
if (lastSortOrder != "asc") {
newSortOrder = "asc";
} else {
newSortOrder = "desc";
}
myArray = await performSort(myArray, sortKey, newSortOrder);
buildtable(myArray);
});
$('#releaseCol').on('click', async function () {
let newSortOrder;
sortKey = "Original Release";
if (lastSortOrder != "asc") {
newSortOrder = "asc";
} else {
newSortOrder = "desc";
}
myArray = await performSort(myArray, sortKey, newSortOrder);
buildtable(myArray);
});
$('#titleCol').on('click', async function () {
let newSortOrder;
sortKey = "Title";
if (lastSortOrder != "asc") {
newSortOrder = "asc";
} else {
newSortOrder = "desc";
}
myArray = await performSort(myArray, sortKey, newSortOrder);
buildtable(myArray);
});
$('#performerCol').on('click', async function () {
let newSortOrder;
sortKey = "Performer";
if (lastSortOrder != "asc") {
newSortOrder = "asc";
} else {
newSortOrder = "desc";
}
myArray = await performSort(myArray, sortKey, newSortOrder);
buildtable(myArray);
});
$('#releasetwoCol').on('click', async function () {
let newSortOrder;
sortKey = "Release Date";
if (lastSortOrder != "asc") {
newSortOrder = "asc";
} else {
newSortOrder = "desc";
}
myArray = await performSort(myArray, sortKey, newSortOrder);
buildtable(myArray);
});
$('#streamCol').on('click', async function () {
let newSortOrder;
sortKey = "Stream Count";
if (lastSortOrder != "asc") {
newSortOrder = "asc";
} else {
newSortOrder = "desc";
}
myArray = await performSort(myArray, sortKey, newSortOrder);
buildtable(myArray);
});
}
</script>
</body>
</html>
