表排序器不能正确排序更新的行
tablesorter not sorting updated rows correctly
我正在做一个个人项目，我有麻烦让我的第5列在Chrome中使用tableorter正确排序。
我为它做了一个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>
您的代码可以在JSFiddle中工作，但不能在您的页面上工作，因为javascript在<body>完成加载之前运行。要么将所有javascript移到页面底部，在</body>标签上方，要么将javascript包装在文档准备函数中:
$(function() {
// add all your javascript here
});
编辑:哦，解析器名称是"digit"而不是"integer":
{ 4: {sorter:"digit"} }
Edit2:你的手是加载tableter两次，并在for循环内初始化它一堆时间-这里是一个更新的演示和固定循环代码:
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函数中，更新表分类器(更新的演示):
var items = [];
function getIlvl(realm, player, index) {
var ilvl;
items.push($.ajax({...}));
// ...
}
function populateTable() {
// ...
$.when.apply($, items).done(function() {
$('#players').trigger('update');
});
}
相关文章：
- 如何在动态表更新后刷新整个表排序缓存
- 可拖动和可排序项目编号在更改时更新
- 更新标签数组时如何对其进行排序
- 更新“项目”选项以进行排序
- 使用一次更新对有序列表中的元素重新排序
- MongoDB使用排序和切片更新嵌套数组，不会对代码进行排序
- jQuery - 排序后更新可排序列表
- React Native ListView 不会在排序或检索新数据后更新
- 从服务器更新的 meteor 集合，不会在客户端上被动排序
- D3 - 为什么此排序函数不更新其选择中的所有元素
- 使用 AJAX 回调更新挖空可观察数组会生成随机排序的结果
- knockoutjs ObservableArrays 和排序函数:UI 未更新
- 如何在主干中对列表进行排序时更新模型的顺序属性
- jQuery UI's未激发可排序更新事件
- 使用Redis更新排序集
- 根据数字排序顺序更新自动重新排列HTML列表
- 在backbone.js中，如何使用新的模型数据更新视图，同时在没有完整渲染的情况下保持排序顺序
- 如何区分在同一列表中拖动和从一个列表移动到连接列表时的可排序更新事件
- jQuery可排序更新的数据没有被序列化
- 表排序器不能正确排序更新的行
