質問は既に議論されていますが、いくつかの検索の後でも私の問題の解決策を見つけることはできません。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でコンテンツを表示しようとした
、すべてがOKです。
テーブルを作成したコードは英語ではコメントされていませんが、結果は大丈夫と思われますので、役に立たなかったと思います。
EDIT:
は、ここでコンソールが表示するものです。また、私はjqueryの中に誤りに気づいたが、私はのは、何を意味するのか分からない:
をそしてここでエラーがローカライズされている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++;
}
}
テーブルローダーの 'debug'オプションを' true'に設定し、コンソールに何が表示されているかを見ます( '$("#tabletest "))。tablesorter({debug:true、sortList: [0,0]]});))。 – Mottie
私はそれを私の投稿に追加します! –
HTMLが不正確であるようですが、スクリーンショットの2行目の 'length:0'は' headerList'が空であることを示しています。つまり、ヘッダーセルが見つかりませんでした.... [このデモ](http: //jsfiddle.net/Mottie/eY8uH/1645/)エラーを複製する... – Mottie