Can't sort my table with tablesorter function

Question

I know the question has been already discussed but, even after some searches 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:

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 didn't find it was useful.

EDIT:

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

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

It looks like the resulting HTML should work... set tablesroter's `debug` option to `true` and see what the console shows (`$("#tabletest").tablesorter({ debug:true, sortList: [[0,0]] });`). — Mottie, Jun 17 '16 at 21:21
It appears that the HTML is malformed, the `length: 0` in the second line of your screenshot shows that the `headerList` is empty, meaning no header cells were found.... Please modify [this demo](http://jsfiddle.net/Mottie/eY8uH/1645/) to duplicate the error... — Mottie, Jun 20 '16 at 00:52

player87 · Answer 1 · 2016-06-25T19:35:09.757

1

Once you have your tablesorter set up like this:

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

Before you populate, you should empty the table and then append the and as per your specific case.

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

Once you update your using JS, you have to trigger an update like this:

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

I had a similar problem - you should look at the docs and examples of TableSorter!

edited Jun 25 '16 at 19:35

answered Jun 20 '16 at 01:31

player87

1,781
1
14
21

The code `$("#tabletest").tablesorter();` should only be called once. Whenever the `tbody` content changes, use `$("#tabletest").trigger("update");` to update the cache. – Mottie Jun 21 '16 at 05:29
Updated to reflect your suggestion. – player87 Jun 25 '16 at 19:35

score 1 · Answer 2 · edited May 23 '17 at 10:34

1

Ok, I finally fixed my issue,

Mottie was right, my Table header wasn't correct, in fact I used inserCells to fill it, but insertCells creates 'td' tags instead of 'th' tags, so tablesorter couldn't works.

I used the solution gaurav gave in this thread: Insert th in thead

Now it works!

So thanks to everyone for helping me!

edited May 23 '17 at 10:34

Community

1
1

answered Jun 23 '16 at 07:35

Romain Martin

75
1
10

It's not documented in the original tablesorter. If you look at [this post](http://wowmotty.blogspot.com/2011/06/jquery-tablesorter-missing-docs.html) for `selectorHeaders`, you'll see it's set to `"thead th"` by default. Change the setting to `"thead th, thead td"` and you won't need to change your HTML. – Mottie Jun 27 '16 at 00:07

Can't sort my table with tablesorter function

2 Answers2