javascript - JQuery tablesorter没有任何效果,我做错了什么?
问题描述
我对 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
我测试了修改后的功能,它可以工作。
推荐阅读
- kubernetes - 如何通过fluentd将json日志发送到stackdriver
- audio - 使用pocketsphinx将音频转换为文本时是否有时间(以分钟和秒为单位)
- android - 如何在自定义 Gridview 中显示项目?
- sql - 如何解决 IIF (SUM IIF) SQL 脚本中的空数据表结果
- android - 此变量必须具有类型注释或已初始化。仅在启动时进行 Toast(Android Studio 中的 Kotlin)
- php - 如何获取使用 curl 从另一台服务器作为中介发送请求的客户端的 ip?
- python - 将模型字段集默认设置为迭代器
- google-apps-script - 如何从由 Google 表单触发的 Javascript 打开新网页?
- c# - 如何正确定义 DDD 中的聚合?
- c# - OUT 参数不变