I'm very new to jQuery and am trying to use Tablesorter, however it has no effect on my table (styling doesn't change to the tablesorter css, and there is no sorting functionality).
Here is my html:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FPLHelper</title>
<link rel="stylesheet" href="css/stylesheet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/css/theme.blue.min.css" rel="stylesheet" />
<script src="js/PlayerList.js"></script>
<script>
$(document).ready(function() {
$("#table-main").tablesorter({ sortList: [[0,0], [1,0]] });
});
</script>
</head>
<body onload="getPlayerList()">
<div class="navigation">
<h1 class="main-heading"><span>FPL</span>Helper</h1>
<a href="main.html">Home</a>
<a href="account.html">Account</a>
<a class="open" href="login.html">Login</a>
<a href="register.html">Register</a>
</div>
<section>
<input type="text" id="playerSearch" onkeyup="tableSearch()" placeholder="Search for a player...">
<div class="tableFixHead">
<table id="table-main" class="tablesorter" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th>First Name</th>
<th>Second Name</th>
<th>Goals Scored</th>
<th>Goals Assisted</th>
<th>FPL Points</th>
<th>Minutes Played</th>
<th>Goals Against</th>
<th>Creativity Score</th>
<th>Influence Score</th>
<th>Threat Score</th>
<th>Bonus Points</th>
<th>Total BPS</th>
<th>ICT Score</th>
<th>Clean Sheets</th>
<th>Red Cards</th>
<th>Yellow Cards</th>
<th>Selected By</th>
<th>Cost</th>
<th>Position</th>
</tr>
</thead>
<tbody id="table-data">
</tbody>
</table>
</div>
</section>
</body>
</html>
And here is the js to populate the table if that would be helpful to see as well (this is in the PlayerList.js):
function getPlayerList() {
console.log("Invoked getPlayerList()");
const url = "/player/list";
fetch(url, {
method: "GET",
}).then(response => {
return response.json(); //now return that promise to JSON
}).then(response => {
if (response.hasOwnProperty("Error")) {
alert(JSON.stringify(response));// if it does, convert JSON object to string and alert
console.log(response);
} else {
console.log(response);
formatPlayerList(response);
}
});
}
function formatPlayerList(data) {
var tr;
for (var i = 0; i < data.length; i++) {
tr = $("<tr/>");
tr.append("<td>"+ data[i].FirstName + "</a></td>");
tr.append("<td>" + data[i].SecondName + "</td>");
tr.append("<td>" + data[i].Goals + "</td>");
tr.append("<td>" + data[i].Assists + "</td>");
tr.append("<td>" + data[i].FPLPoints + "</td>");
tr.append("<td>" + data[i].MinsPlayed + "</td>");
tr.append("<td>" + data[i].GoalsAgainst + "</td>");
tr.append("<td>" + data[i].Creativity + "</td>");
tr.append("<td>" + data[i].Influence + "</td>");
tr.append("<td>" + data[i].Threat + "</td>");
tr.append("<td>" + data[i].BonusPoints + "</td>");
tr.append("<td>" + data[i].BPSTotal + "</td>");
tr.append("<td>" + data[i].ICTScore + "</td>");
tr.append("<td>" + data[i].CleanSheets + "</td>");
tr.append("<td>" + data[i].RedCards + "</td>");
tr.append("<td>" + data[i].YellowCards + "</td>");
tr.append("<td>" + data[i].SelectedBy + "</td>");
tr.append("<td>" + data[i].BuyCost + "</td>");
tr.append("<td>" + data[i].PlayingPos + "</td>");
$('#table-main').append(tr);
}
isClicked();
}
Sorry if this is something really obvious, and if you need to see any more of my code then just ask. Thanks.
Edit: I have tried without using any of my css at all to see if that was doing anything, but that didn't work either. As per what I answered below, there are no errors etc. in the console.
Welcome to so. tablesorter() by default works only for static table content. All dynamically added tr's must be added into the tablesorter by addRows() method, so your function formatPlayerList() should be changed as follows:
function formatPlayerList(data) {
var tr;
var resort = false, callback = null;
for (var i = 0; i < data.length; i++) {
tr = $("<tr/>");
tr.append("<td>"+ data[i].FirstName + "</a></td>");
tr.append("<td>" + data[i].SecondName + "</td>");
tr.append("<td>" + data[i].Goals + "</td>");
tr.append("<td>" + data[i].Assists + "</td>");
tr.append("<td>" + data[i].FPLPoints + "</td>");
tr.append("<td>" + data[i].MinsPlayed + "</td>");
tr.append("<td>" + data[i].GoalsAgainst + "</td>");
tr.append("<td>" + data[i].Creativity + "</td>");
tr.append("<td>" + data[i].Influence + "</td>");
tr.append("<td>" + data[i].Threat + "</td>");
tr.append("<td>" + data[i].BonusPoints + "</td>");
tr.append("<td>" + data[i].BPSTotal + "</td>");
tr.append("<td>" + data[i].ICTScore + "</td>");
tr.append("<td>" + data[i].CleanSheets + "</td>");
tr.append("<td>" + data[i].RedCards + "</td>");
tr.append("<td>" + data[i].YellowCards + "</td>");
tr.append("<td>" + data[i].SelectedBy + "</td>");
tr.append("<td>" + data[i].BuyCost + "</td>");
tr.append("<td>" + data[i].PlayingPos + "</td>");
//$('#table-main').append(tr);
$('#table-data').append(tr);
$("#table-main").trigger('addRows', [tr, resort, callback]);
}
//
//isClicked();
}
Please take a look on https://mottie.github.io/tablesorter/docs/#methods
I tested the modified function, it works.