tablesorterは更新された行を正しくソートしていません

私は個人的なプロジェクトに取り組んでいますが、第5カラムをtablesorterを使用してChromeで適切に並べ替えることができません。 ~~私はこれにjsfiddleを作って、それでうまく動作します。~~ tablesorterは更新された行を正しくソートしていません

誰かが正しい方向にこの ~~を修正し、なぜjsfiddleが機能するのかを説明できますが、クロムだけでは~~ はありませんか？ここでhttps://jsfiddle.net/3rbp6okz/

を完全なファイルです：

はここjsfiddleだ<body>のロードが完了する前にはJavaScriptが実行されるため

<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>

出典

2016-09-19 barnwellrd

あなたのコードは、あなたのページにJSFiddleに動作しますが、ありません。どちらかが</body>タグの上、ページの下にすべてのあなたのjavascriptを移動したり、ドキュメントレディ機能にはJavaScriptをラップ：

$(function() { 
    // add all your javascript here 
});

編集：ああとパーサ名は「数字」ではない「整数」です。

{ 4: {sorter:"digit"} }

EDIT2：あなたのフィドルは二回tablesorterをロードし、それをのためのループ内の時間の束を初期化している - 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完全コールバック内にロードされているという事実を忘れていました。答えを

var items = []; 
function getIlvl(realm, player, index) { 
    var ilvl; 
    items.push($.ajax({...})); 
    // ... 
} 

function populateTable() { 
    // ... 
    $.when.apply($, items).done(function() { 
    $('#players').trigger('update'); 
    }); 
}

出典

2016-09-19 22:52:48 Mottie

感謝：私は、最も簡単な解決策は、いくつかの約束を設定し、その後done機能では、tablesorterを更新（updated demo）ことであろうと思います！残念なことに、スクリプトを本文の下に移動したり、整数を数字に変更したりすることによっても、同じ結果が得られました。私はjsfiddleを二重にチェックしたので、私の質問を編集しました。 – barnwellrd

この編集により、ページの読み込みとソートが大幅に増加しましたが、更新されたデモリンクでもアイテムレベルの列は正しくソートされません。「アイテムレベル」ヘッダーをクリックすると、正しく並べ替えられますか？最初のページが読み込まれた後、5番目の列の値の一部が更新されています。それが問題の原因になるのでしょうか？ – barnwellrd

私の更新された答えを確認してください...なぜロード/ソートがそれほど長い時間がかかったのか分かりません...問題がテーブルポーターかどうかを確認するために 'debug'オプションを設定してみてください。 – Mottie

tablesorterは更新された行を正しくソートしていません

答えて

関連する問題