JQuery Table Sort issue - Skipping column disables first mouse click

Question

I have created a basic table in js fiddle. I am using the datatable sorter function, however if you click along the headers, or click a header, skip one and click another, it seems to ignore the first mouse-click. (To replicate the issue click on Confirmation Period, then ABN, then back to Confirmation Period)

Any thoughts?

<table id="tableSort" class="tableSort" cellspacing="0" style="margin-top:20px;margin-left:10px;">
<thead>
    <tr>
        <th>Confirmation Period</th>
        <th>Legal/Entity Name</th>
        <th>ABN</th>
        <th>Business/Trading Name</th>
        <th>Status</th>
    </tr>
</thead>
<tr>
    <td>1</td>
    <td>a</td>
    <td>34</td>
    <td>78</td>
    <td>b</td>
</tr>
<tr>
    <td>2</td>
    <td>c</td>
    <td>100</td>
    <td>90</td>
    <td>g</td>
</tr>

and the JS...

$(document).ready(function () {
    $('#tableSort').dataTable({
        "searching": false,
            "paging": false,
            "info": false
});

});

jsfiddle: http://jsfiddle.net/wcdg3ddL/

Answer 1

The table is actually sorting as expected. There are two reasons why it looks like the columns aren't sorting:

1. You have insufficient rows in your table to assess whether or not sorting is working. Add few more rows of data and you should see what I mean.
2. Because you've removed the arrows from the header row with your custom styling you cannot accurately gauge how the sorting is behaving. If you add in the default CSS styling you can see the direction in which a column is being sorted.

Here is a fiddle where I have added sufficient rows so that the columns appear to be sorting correctly.

I just added more rows to your fiddle:

<tr>
        <td>1</td>
        <td>a</td>
        <td>34</td>
        <td>78</td>
        <td>b</td>
</tr>