无法使用 tablesorter 功能对我的表进行排序

Question

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

我尝试使用 jQuery 的 tablesorter 插件，但它在我的桌子上不起作用。 但是我可以对我在网站上找到的表格进行排序，因此 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]]} );
                    }})
                }

我尝试将 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 是对的，我的 Table 标题不正确，实际上我使用了 inserCells 来填充它，但是 insertCells 创建了 'td' 标签而不是 'th' 标签，所以 tablesorter 无法工作。

我使用了 gaurav 在这个帖子中给出的解决方案：Insert th in thead

现在可以了！

感谢大家帮助我！

Answer 2

一旦你像这样设置你的表格排序器：

$("#tabletest").tablesorter( {sortList: [[0,0]]} );

在填充之前，您应该清空表格，然后根据您的具体情况附加 and。

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

一旦你更新了你使用的 JS，你必须像这样触发更新：

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

我遇到了类似的问题 - 你应该看看 TableSorter 的文档和示例！