%%html
# defines the tableID that is going to be referred to in the future
<table id="sportsTable">
<thead>
<tr>
# these are the sortTable functions for each of the columns. the onclick allows for on click of the table header.
<th onclick="sortTable('assists per game')">Assists Per Game</th>
<th onclick="sortTable('minutes per game')">Minutes Per Game</th>
<th onclick="sortTable('blocks per game')">Blocks Per Game</th>
<th onclick="sortTable('defensive rebounds')">Defensive Rebounds</th>
<th onclick="sortTable('fg percent')">FG Percent</th>
<th onclick="sortTable('ft percent')">FT Percent</th>
<th onclick="sortTable('games played')">Games Played</th>
<th onclick="sortTable('height (inches)')">Height (inches)</th>
<th onclick="sortTable('name')">Name</th>
<th onclick="sortTable('offensive rebounds')">Offensive Rebounds</th>
<th onclick="sortTable('points per game')">Points Per Game</th>
<th onclick="sortTable('steals per game')">Steals Per Game</th>
<th onclick="sortTable('team')">Team</th>
<th onclick="sortTable('three percent')">Three Percent</th>
<th onclick="sortTable('weight (pounds)')">Weight (pounds)</th>
</tr>
</thead>
<tbody>
# sample data following on frontend, just for demo.
<tr>
<td>2</td>
<td>35</td>
<td>1</td>
<td>5</td>
<td>44</td>
<td>88</td>
<td>1421</td>
<td>81</td>
<td>LeBron James</td>
<td>6</td>
<td>28</td>
<td>1</td>
<td>Los Angeles Lakers</td>
<td>24</td>
<td>250</td>
</tr>
<tr>
<td>3</td>
<td>32</td>
<td>2</td>
<td>6</td>
<td>55</td>
<td>92</td>
<td>1231</td>
<td>75</td>
<td>Steph Curry</td>
<td>5</td>
<td>29</td>
<td>1</td>
<td>Golden State Warriors</td>
<td>34</td>
<td>185</td>
</tr>
</table>
<script>
// sortTable function meant to sort based on each column header.
function getColumnIndex(columnName) {
// each column name is taken in columnName to get its index.
const table = document.getElementById('sportsTable');
const headerRow = table.getElementsByTagName('thead')[0].getElementsByTagName('tr')[0];
// contains the column headers, index 0
const headers = Array.from(headerRow.getElementsByTagName('th'));
return headers.findIndex(header => header.innerText.toLowerCase() === columnName.toLowerCase()) + 1;
// converts column header names to lowercase to account for sortTable definitions
}
function sortTable(columnName) {
const table = document.getElementById('sportsTable');
// constant calls the tableID that was previously defined
const rows = Array.from(table.tBodies[0].getElementsByTagName('tr'));
const headerRow = table.getElementsByTagName('thead')[0].getElementsByTagName('tr')[0];
const isAscending = !headerRow.classList.contains('asc');
// this is a very important line - the asc class helps the function decide whether or not the column is going to be sorted in increasing order or decreasing order.
rows.sort((rowA, rowB) => {
let cellA = rowA.querySelector(`td:nth-child(${getColumnIndex(columnName)})`).innerText;
let cellB = rowB.querySelector(`td:nth-child(${getColumnIndex(columnName)})`).innerText;
// the nth-child selector is different from normal JS arrays, these have an index starting at 1 rather than 0
// the rows are sorted based on the column. getColumnIndex is used to get the index of the column.
if (columnName.toLowerCase() === 'name' || columnName.toLowerCase() === 'team') {
return isAscending ? cellA.localeCompare(cellB, undefined, { sensitivity: 'base' }) : cellB.localeCompare(cellA, undefined, { sensitivity: 'base' });
}
// these were for special situations. the name and team columns were not sorting properly, so the localeCompare was used to sort the rows alphabetically.
// Convert the cell values to numbers for the "Games Played" column
if (columnName.toLowerCase() === 'games played') {
cellA = parseInt(cellA);
cellB = parseInt(cellB);
}
// games played was not sorting for some odd reason, which is why this if statement was added.
// purpose is to parse the values as an integer and then sort numerically.
return isAscending ? cellA - cellB : cellB - cellA;
});
rows.forEach(row => table.tBodies[0].appendChild(row));
headerRow.classList.toggle('asc');
// this is meant for after sorting. after the sorting is done, the appendChild is meant to append these cell values back into the specified table.
}
</script>