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

编程问答 2022-05-28

问题描述

我对 jQuery 非常陌生，正在尝试使用 Tablesorter，但是它对我的表格没有影响（样式不会更改为 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>

这里是用于填充表格的 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 来查看是否有任何作用，但这也不起作用。根据我在下面的回答，控制台中没有错误等。

解决方法

欢迎如此。默认情况下，tablesorter() 仅适用于静态表格内容。所有动态添加的 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

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