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

一旦你的tablesorter设置如下：

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

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

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

更新使用JS后，您必须触发如下更新：

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

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

Answer 2

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

Mottie是对的，我的表头不正确，实际上我用inserCells来填充它，但是insertCells创建'td'标签而不是'th'标签，所以tablesorter无法工作。

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

现在有效！

非常感谢大家的帮助！

无法使用tablesorter函数对表格进行排序

2 个答案: