javascript - 无法使用 tablesorter 功能对表进行排序

Question

我知道这个问题已经被讨论过，但是，即使经过一些搜索，我也找不到解决我的问题的方法。

我尝试使用 jQuery 的 tablesorter 插件，但它在我的 table 上不起作用。不过，我可以对网站上找到的表格进行排序，因此表格排序器已正确加载，并且不存在 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]]} );
                    }})
                }

我尝试将 tablesorter 函数放在 ajax 回调的末尾，以确保当我尝试排序时我的表已加载。我还尝试将此函数放入 document.ready() 函数和 window.load() 中，在其中调用我的 refresh() > 功能但不起作用，

控制台不返回任何错误消息，但什么也没有发生。

我检查了 Firefox 的检查器，我的表格已正确构建:

我也尝试用console.log显示内容，一切正常。

很抱歉建表的代码没有英文注释，但由于结果看起来还可以，所以我没发现它有什么用。

编辑:

这是控制台显示的内容。我还注意到 jquery 中有一个错误，但我不知道是什么意思:

这是 jquery 中的代码，其中错误被定位:

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++;
                }
}

Answer 1

好的，我终于解决了我的问题，

Mottie 是对的，我的表头不正确，事实上我使用了 insertCells 来填充它，但是 insertCells 创建了“td”标签而不是“th”标签，因此 tablesorter 无法工作。

我使用了 gaurav 在这个线程中给出的解决方案:Insert th in thead

现在可以了!

非常感谢大家对我的帮助!