At work, I’ve recently been building a web-based tool that aggregates information about network devices from a variety of sources, and allows searching based on given criteria. The js/html frontend communicates with a python backend via ajax requests. Having some experience with it in the past, I decided to use sorttable.js for sorting data by column.

Sorttable.js has an easy way to make a table sortable after dynamically adding it via DOM calls. Despite this, my table still wasn’t sorting anything when I clicked on column headers. I was adding new table rows with (paraphrased) document.getElementById('tableId').appendChild('someTrElem'), and they were showing up in the table, but none of the table headers had events listening even after calling sorttable.makeSortable.

Eventually, through exploring with my favorite DOM inspector, I discovered that all my table rows containing data had somehow been added as children of my <thead>, as opposed to the <tbody> I had also created. Once I started explicitly adding my new <tr>s to my <tbody> rather than the <table>, I was finally able to sort the table.