JQuery tablesorter 没有任何效果，我做错了什么？

Question

我是 jQuery 的新手，正在尝试使用 Tablesorter，但是它对我的 table 没有影响（样式不会更改为 tablesorter css，没有排序功能）。

这是我的 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>

这是填充 table 的 js，如果这也有助于查看（在 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();
}

抱歉，如果这真的很明显，如果您需要查看更多我的代码，请直接询问。谢谢

编辑：我尝试过完全不使用我的任何 css 来查看它是否在做任何事情，但这也没有用。根据我在下面的回答，控制台中没有错误等。

Answer 1

欢迎来到这里。 tablesorter() 默认仅适用于静态 table 内容。所有动态添加的 tr 都必须通过 addRows() 方法添加到 tablesorter 中，因此您的函数 formatPlayerList() 应更改如下：

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();
}

请看https://mottie.github.io/tablesorter/docs/#methods

我测试了修改后的功能，有效。

JQuery tablesorter 没有任何效果，我做错了什么？

JQuery tablesorter is not having any effect, what have I done wrong?

javascript

jquery

tablesorter