2016-06-17 5 views
0

質問は既に議論されていますが、いくつかの検索の後でも私の問題の解決策を見つけることはできません。tablesorter関数を使用してテーブルをソートできない

jQueryのtablesorterアドオンを使用しようとしましたが、テーブル上で動作しません。 しかし、私はウェブサイトで見つけたテーブルを並べ替えることができるので、テーブル・ポーターは正しくロードされており、CSSの問題はありません。 は、ここに私のテーブルのコードです:

<table id="tabletest" class="tablesorter"> 
</table> 

あなたが見ることができるように、私のテーブルを動的に構築されています。

function refresh(){ 
       var terms=" name,elevation,gnvid,type,status,display "; 
       var database='hotvolc_volcanoes'; 
       var condition=''; 
       $.ajax({ //La requête ajax pour récupérer les données sous forme d'un tableau de Json 
          url: 'includes/query_ajax.php', //adresse du script php qui interroge la BDD 
          data: { terms : terms, database : database, condition : condition }, //la requete qu'on lui fait passer en paramètres 
          method: 'post', 
          success: function (data) { //La fonction callback qui sera exécutée une fois que la requête ajax sera terminée 
           //Cette fonction contient la création de la carte et l'affichage des icones tirés de la BDD 
           delRows('tabletest'); 
           var iconFeatures=[]; 
           //console.log(data); 
           var line; 
           var titles=terms.split(","); 
           var result=$.parseJSON(data); 
           var n= result[0].length; 
           var m= result.length; 
           var number=get_number(); 
           if (m>number){m=number} 
           var tableau = document.getElementById("tabletest"); 
           var header = tableau.createTHead(); 
           //var triline = header.insertRow(0); 
           var hline = header.insertRow(-1);  
           for (var i=0; i<n; i++)//Cette boucle permet de récupérer chaque métadonnée issue de la BDD 
           { 
            var hcolonne =hline.insertCell(i);//on a une ajouté une cellule 
            //var tricolonne =triline.insertCell(i);//on a une ajouté une cellule 
            //tricolonne.innerHTML += "<div id='tri' style='border:1px solid black;text-align : center' onclick='tri("+i+")' >Haut</div>" + "<br>" ;//on y met le contenu de titre 
            hcolonne.innerHTML += titles[i] ;//on y met le contenu de titre 
           } 
           var body = tableau.createTBody(); 
           for (var j=0; j<m; j++)//Cette boucle permet de récupérer chaque métadonnée issue de la BDD 
           { 
            var line=(result[j]); 
            var ligne = body.insertRow(-1);//on a ajouté une ligne 
            for (var i=0; i<n; i++)//Cette boucle permet de récupérer chaque métadonnée issue de la BDD 
            { 
             var colonne = ligne.insertCell(i);//on a une ajouté une cellule 
             colonne.innerHTML += line[i] ;//on y met le contenu de titre  
            } 
           } 
           console.log(document.getElementById('tabletest').rows[0].cells[0].innerHTML); 
           $("#tabletest").tablesorter({sortList: [[0,0]]}); 
        }}) 
       } 

が、私はそれを並べ替えるしようとすると、私のテーブルがロードされていることを確認するためには、私のAJAXのコールバックの端部にtablesorter機能を入れてみました: は、ここに私のテーブルを構築するコードです。 私はまた、コンソールにエラー・メッセージを返しませんが、何も起こりません

document.ready()機能で、私は私の refresh()関数を呼び出しますが、それは動作しません window.load()でこの機能を入れてみました。

私は、Firefoxのインスペクタにチェックして、私のテーブルが正しく構築されています:私もにconsole.logでコンテンツを表示しようとした

table's content

、すべてがOKです。

テーブルを作成したコードは英語ではコメントされていませんが、結果は大丈夫と思われますので、役に立たなかったと思います。

EDIT:

は、ここでコンソールが表示するものです。また、私はjqueryの中に誤りに気づいたが、私はのは、何を意味するのか分からない:

Console show of the debug's option

をそしてここでエラーがローカライズされているjqueryの内のコードです:あなたはあなたのtablesorterを持っていたら

function updateHeaderSortCount(table, sortList) { 
       var c = table.config, 
        l = sortList.length; 
       for (var i = 0; i < l; i++) { 
        var s = sortList[i], 
         o = c.headerList[s[0]]; 
        o.count = s[1]; 
        o.count++; 
       } 
} 
+0

テーブルローダーの 'debug'オプションを' true'に設定し、コンソールに何が表示されているかを見ます( '$("#tabletest "))。tablesorter({debug:true、sortList: [0,0]]});))。 – Mottie

+0

私はそれを私の投稿に追加します! –

+0

HTMLが不正確であるようですが、スクリーンショットの2行目の 'length:0'は' headerList'が空であることを示しています。つまり、ヘッダーセルが見つかりませんでした.... [このデモ](http: //jsfiddle.net/Mottie/eY8uH/1645/)エラーを複製する... – Mottie

答えて

1

入力する前に、テーブルを空にする必要があります。そして、あなたの特定のケースに合わせて、テーブルを空にする必要があります。あなたが使用してJSを更新したら

$("#tabletest").empty(); 
$("#tabletest").append('<thead>blah blah ...'); 

、あなたは次のように更新をトリガする必要があります。

$("#tabletest").trigger("update"); 

が、私は同様の問題があった - あなたはTableSorterのドキュメントと例をご覧ください!

+0

コード '$("#tabletest ")。tablesorter();'は一度しか呼び出されません。 'tbody'の内容が変わるたびに' $( "#tabletest")。trigger( "update"); 'を使ってキャッシュを更新します。 – Mottie

+0

あなたの提案を反映するように更新されました。 – player87

1

[OK]を、私はようやく私の問題は、

Mottieは正しかった、私の表のヘッダは、正しくありませんでした実際には、私はそれを埋めるためにinserCellsを使用しますが、insertCellsではなく、番目の "タグの「TD」のタグを作成し、固定ので、tablesorterは動作できませんでした。

私はこのスレッドに与えたソリューションのGauravを使用:Insert th in thead

は、今では動作します!

だから私を助けてくれてありがとう!

+0

元のtablesorterには記載されていません。 'この投稿(http://wowmotty.blogspot.com/2011/06/jquery-tablesorter-missing-docs.html)で' selectorHeaders'を見ると、それは '' theth th ''に設定されています'デフォルトで。設定を「theth th、thead td」に変更すると、HTMLを変更する必要はありません。 – Mottie

関連する問題