samedi 25 juin 2016

Can't sort my table with tablesorter function


I know the question has been already discussed but, even after some searchs I can't find solution to my problem.

I tried to use the jQuery's tablesorter addon but it doesn't work on my table. However I can sort tables I find on website, so tablesorter is correctly loaded and there's no problem of css. Here's the code of my table:

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

As you can see, my table is built dynamically. Here is the code which constructs my 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]]} );
                    }})
                }

I tried to put the tablesorter function at the end on my ajax's callback, in order to be sure that my table is loaded when I try to sort it. I also tried to put this function in a document.ready() function and in a window.load() where I call my refresh()function but it doesn't work,

The console doesn't return any error message, but nothing happens.

I checked on the firefox's inspector and my table is correctly built:

table's content

I also tried to show the content with console.log and everything is ok.

I'm sorry that the code that built the table is not commented in english, but as the result seems to be ok, I didnt find it was useful.

Thanks you for your help

EDIT:

Here's what the console shows. I also noticed an error in jquery but I don't know what's mean:

Console show of the debug's option

And here is the code in jquery where the error is localized:

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

Aucun commentaire:

Enregistrer un commentaire