javascript - JQuery Table Sort issue - Skipping column disables first mouse click -

i have created basic table in js fiddle. using datatable sorter function, if click along headers, or click header, skip 1 , click another, seems ignore first mouse-click. (to replicate issue click on confirmation period, abn, 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 js...

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

});

jsfiddle: http://jsfiddle.net/wcdg3ddl/

the table sorting expected. there 2 reasons why looks columns aren't sorting:

1. you have insufficient rows in table assess whether or not sorting working. add few more rows of data , should see mean.
2. because you've removed arrows header row custom styling cannot accurately gauge how sorting behaving. if add in default css styling can see direction in column being sorted.

here fiddle have added sufficient rows columns appear sorting correctly.

i added more rows fiddle:

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