Search code examples
jqueryhtmltablesorter

jquery tablesorter unclosed tag on IE11

I'm using the jquery tablesorter, on IE11 on a clients system (version 11.0.9600.18161) and also on Chrome (version 50.0.2661.102 m) the tables will not sort by clicking on the header, after looking at the Console in IE I see:

    HTML1509: Unmatched end tag.

I've looked at the generate HTML and can see this:

        <colgroup class="tablesorter-colgroup">
        <col style="width: 8.5%;">
        <col style="width: 9.8%;">
        <col style="width: 7.6%;">
        <col style="width: 6.8%;">
        <col style="width: 22%;">
        <col style="width: 8.6%;">
        <col style="width: 9.2%;">
        <col style="width: 12.9%;">
        <col style="width: 14.1%;">
        </colgroup>

The source is the same for all browsers, although this is the same in Firefox, firefox does not report any issues and everything works, but this looks wrong to me, why aren't there any closing 'col' tags?

Here is my call to tablesorter:

          $(objLocTable).tablesorter({theme:'blue'
                            ,showProcessing:true
                                ,widthFixed:false
                                   ,widgets:['zebra'
                                             ,'scroller']
                              ,widgetOptions:{scroller_fixedColumns:2
                                                  ,scroller_height:400
                                             ,scroller_upAfterSort:true
                                            ,scroller_jumpToHeader:true}})
                               .tablesorterPager({container:$('.pager')});

I tracked down an error in the function 'sortNatural', if either a or b isn't a string the routine errors, but there is no error handling so the sort isn't completed.

I can't tell you why either a or b wouldn't be a string, looking at the data set they should be, but single stepping in debugging shows that one of the parameters is null and this screws up the function.

I've fixed the problem by surround the function content with a try / catch clause.

Solution

  • According to the WHATWG HTML Living Standard & the HTML w3.org HTML5 definitions, the <col> tag has no end tag.

    Tag omission in text/html: No end tag.

    To get around this problem, leave tablesorter's widthFixed option as false (default setting), and set the column widths using CSS - target class names in the header, or use nth-child in the css.

    Oh, and you can report this issue to IE.