Help with this sorting Table?

I’d searched around for a working JS script. There’s 2 that I found but seems like they only work for 1 row of <th> element. I need the table to be like below:

Diameter/Height should be sortable instead of Dimension.
And VCC/RL should be sortable instead of Operational Setting.

Anyone has a solution to this?

I was using this sortable table btw. Or is there any possible workaround?

Looking at the library, here’s my guess as to where you’d need to change stuff:


  makeSortable: function(table) {
    if (table.getElementsByTagName('thead').length == 0) {
      // table doesn't have a tHead. Since it should have, create one and
      // put the first table row in it.
      the = document.createElement('thead');
      the.appendChild(table.rows[0]);
      table.insertBefore(the,table.firstChild);
    }
    // Safari doesn't support table.tHead, sigh
    if (table.tHead == null) table.tHead = table.getElementsByTagName('thead')[0];
    
    if (table.tHead.rows.length != 1) return; // can't cope with two header rows

At this point you’re either creating the thead, or your looking to see if if there is one… and assigning it to table.tHead. I think at this point what you’d want to do it lie to Javascript: give all the parts that need to be sorted a class or something, and get a nodeList of just those things… that way the script thinks there is only 1 row in the thead:
[“Model Names”, “Directional”, “Diameter”, “Height”, “Sensitivity”, “Impedence”, “VCC”, “RL”, “Country”]

it would have no idea there was a colgroup called “Dimension” or one called “Operational Setting”.

At least that’s where I would start looking… I’m assuming there’s a column underneath each of the divided chunks, right? A col for Diameter and another for height?