我正在处理个人项目，而我无法使用tablesorter将我的第5列在Chrome中正确排序。 我为此制作了一个jsfiddle并且它可以正常工作。
有人可能会指出我正确的方向来解决这个并解释为什么jsfiddle可以工作，但Chrome本身并没有？
这里是jsfiddle：https://jsfiddle.net/3rbp6okz/
以下是完整档案：
<html>
<head>
<title>Dark Insanity Guild Roster</title>
<script type="text/javascript" src="jq/tablesorter-master/jquery-3.1.0.js"></script>
<script type="text/javascript" src="jq/tablesorter-master/jquery.tablesorter.js"></script>
<script>
var playernamelink = [];
var playername = [];
var playerclass =[];
var playerspec =[];
var playerlvl =[];
var playerilvl =[];
var playerrealm =[];
var totalPlayers = 0;
//start data pull
pull();
//get the data from battle.net
function pull()
{
$.ajax
(
{
url: 'https://us.api.battle.net/wow/guild/Sen\'jin/dark%20insanity?fields=members&locale=en_US&jsonp=guilddata&apikey=tfawppjfe9aj9zd5pudqv76x86fhbnpe',
type:"GET",
data: { fields: "members" },
dataType: "jsonp",
contentType:"application/json",
jsonpCallback:"guilddata",
success: function(data)
{
for(var i in data.members)
{
playernamelink[i] = '<a href="http://us.battle.net/wow/en/character/' +fixRealm(data.members[i].character.realm)+ '/' + data.members[i].character.name + '/simple" target=_blank>'+ data.members[i].character.name + '</a>';
playername[i] = data.members[i].character.name;
playerclass[i] = getClass(data.members[i].character.class);
playerspec[i] = (data.members[i].character.spec ? data.members[i].character.spec.name : "");
playerlvl[i] = data.members[i].character.level;
playerrealm[i] = fixRealm(data.members[i].character.realm);
totalPlayers++;
};
},
complete: function(data)
{
for(var i = 0; i < totalPlayers; i++)
{
//only make API call if player level is 110
if(playerlvl[i] == '110')
{
getIlvl(playerrealm[i], playername[i], i);
}
}
populateTable();
}
}
);
}
//call the api to get players Ilvl
function getIlvl(realm,player,index)
{
var ilvl;
$.ajax
(
{
//https://us.api.battle.net/wow/character/sen'jin/Palador?fields=items&locale=en_US&apikey=tfawppjfe9aj9zd5pudqv76x86fhbnpe
url: 'https://us.api.battle.net/wow/character/'+realm+'/'+player+'?fields=items&locale=en_US&json=player&apikey=tfawppjfe9aj9zd5pudqv76x86fhbnpe',
type:"GET",
data2: {fields: "items"},
dataType: "json",
contentType:"application/json",
jsonpCallback:"player",
success: function(data2)
{
//console.log(data2);
//console.log(data2.items.averageItemLevel);
ilvl = data2.items.averageItemLevel;
},
complete: function(data)
{
playerilvl[index] = ilvl;
//UPDATE cell with Ilvl
var x = document.getElementById("players").rows[index].cells;
x[4].innerHTML = playerilvl[index];
}
}
);
}
//format realm string for URL
function fixRealm(realm)
{
return (realm == 'Sen\'jin') ? 'Sen\'jin' : 'Quel\'dorei';
}
//return class string
function getClass(classNumber)
{
switch(classNumber)
{
case(1):
return 'Warrior';
break;
case(2):
return 'Paladin';
break;
case(3):
return 'Hunter';
break;
case(4):
return 'Rogue';
break;
case(5):
return 'Priest';
break;
case(6):
return 'Death Knight';
break;
case(7):
return 'Shaman';
break;
case(8):
return 'Mage';
break;
case(9):
return 'Warlock';
break;
case(10):
return 'Monk';
break;
case(11):
return 'Druid';
break;
case(12):
return 'Demon Hunter';
break;
}
}
//populate table with data after completed API call to guild data
function populateTable()
{
var tableRef = document.getElementById('players').getElementsByTagName('tbody')[0];
for(var i = 1; i < totalPlayers; i++)
{
var row = tableRef.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
cell1.innerHTML = playernamelink[i];
cell2.innerHTML = playerclass[i];
cell3.innerHTML = playerspec[i];
cell4.innerHTML = playerlvl[i];
cell5.innerHTML = '0';
}
//initialize tablesorter
$("#players").tablesorter({
headers: {
4: {
sorter: "digit"
}
}
});
}
</script>
</head>
<!--<link rel="stylesheet" type="text/css" href="C:\Users\Ambassador RickFace\Desktop\web\jq\tablesorter-master\themes\blue\style.css">
-->
<body>
<h1>Dark Insanity Guild Members</h1><br>
<table id="players" class="tablesorter">
<thead>
<tr>
<th>Name</th>
<th>Class</th>
<th>Specialization</th>
<th>Level</th>
<th>Item Level</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</body>
</html>
答案 0 :(得分：0)
您的代码在JSFiddle中工作，但不在您的页面上，因为javascript是在<body>完成加载之前运行的。将所有javascript移动到页面底部，</body>标记上方，或将javascript包装在文档就绪函数中：
$(function() {
// add all your javascript here
});
编辑：哦，解析器名称是＆＃34;数字＆＃34;不是＆＃34;整数＆＃34;：
{ 4: {sorter:"digit"} }
Edit2：你的小提琴是加载tablesorter两次并在for循环中初始化它多次 - here is an updated demo和固定循环代码：
function populateTable() {
var tableRef = document.getElementById('players').getElementsByTagName('tbody')[0];
for (var i = 1; i < totalPlayers; i++) {
var row = tableRef.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
cell1.innerHTML = playernamelink[i];
cell2.innerHTML = playerclass[i];
cell3.innerHTML = playerspec[i];
cell4.innerHTML = playerlvl[i];
cell5.innerHTML = '0';
}
//initialize tablesorter
$("#players").tablesorter({
headers: {
4: {
sorter: "digit"
}
}
});
}
更新2：哦，我错过了在ajax完整回调中加载更多异步数据的事实。我认为最简单的解决方案是设置一些承诺，然后在done函数中更新tablesorter（updated demo）：
var items = [];
function getIlvl(realm, player, index) {
var ilvl;
items.push($.ajax({...}));
// ...
}
function populateTable() {
// ...
$.when.apply($, items).done(function() {
$('#players').trigger('update');
});
}