CODEWITHSUNDEEP
jqueryhtml
Edward
Edward

Reputation: 3081

Jquery table sorter not sorting correctly

So i have a table setup and i'm trying to sort on a column containing integers however it's not sorting it correctly. Change the numbers on the learning group column then click on the header to sort it, you will see that it does not sort it in ascending or desencing order correctly..

http://jsfiddle.net/2mLr4/1/

HTML

<table id="mytable" class="tablesorter">
<thead>
    <tr> 
    <th>Status</th> 
    <th>Participant Name</th> 
    <th>Reminder Alerts</th>
    <th>E-mail</th> 
    <th>Learning Group</th>
    </tr> 
</thead>
     <tbody>
         <tr>
         <td class="check">i</td>
         <td>Joe Smith <span>Has not started filling out his forms.</span> </td>
         <td> Empty </td>
         <td><button class="clean-gray logout" name="">Remind Now</button> </td>

        <td>
        <div class="learning_selecter">
        <span>3</span>
        <select class="learning_group_num">
        <option value="lg_1">1</option>
        <option value="lg_2">2</option>
        <option value="lg_3">3</option>
        <option value="lg_4">4</option>
        <option value="lg_5">5</option>
        </select>
        </div>  
        </td>
        </tr>

         <tr>
         <td class="check">i</td>
         <td>Joe Smith <span>Has not started filling out his forms.</span> </td>
         <td> Empty </td>
         <td><button class="clean-gray logout" name="">Remind Now</button> </td>

        <td>
        <div class="learning_selecter">
        <span>4</span>
        <select class="learning_group_num">
        <option value="lg_1">1</option>
        <option value="lg_2">2</option>
        <option value="lg_3">3</option>
        <option value="lg_4">4</option>
        <option value="lg_5">5</option>
        </select>
        </div>  
        </td>
        </tr>

        <tr>
         <td class="check">i</td>
         <td>Joe Smith <span>Has not started filling out his forms.</span> </td>
         <td> Empty </td>
         <td><button class="clean-gray logout" name="">Remind Now</button> </td>

        <td>
        <div class="learning_selecter">
        <span>5</span>
        <select class="learning_group_num">
        <option value="lg_1">1</option>
        <option value="lg_2">2</option>
        <option value="lg_3">3</option>
        <option value="lg_4">4</option>
        <option value="lg_5">5</option>
        </select>
        </div>  
        </td>
        </tr>



         <tr>
         <td class="check">i</td>
         <td>Joe Smith <span>Has not started filling out his forms.</span> </td>
         <td> Empty </td>
         <td><button class="clean-gray logout" name="">Remind Now</button> </td>

        <td>
        <div class="learning_selecter">
        <span>2</span>
        <select class="learning_group_num">
        <option value="lg_1">1</option>
        <option value="lg_2">2</option>
        <option value="lg_3">3</option>
        <option value="lg_4">4</option>
        <option value="lg_5">5</option>
        </select>
        </div>  
        </td>
        </tr>

            </tbody>
            </table>

Upvotes: 0

Views: 435

Answers (1)

Adam Tomat
Adam Tomat

Reputation: 11516

The reason is because (I imagine for speed) tablesorter is effectively caching the values in the table. When you update them, tablesorter doesn't know about the changes and continues to sort them based on it's old values.

I've had a quick google and found you can use this to let tablesorter know you've updated something:

$("#mytable")
        .trigger('update')
        .trigger('sorton', [sorting]);

Here's a jsfiddle

Upvotes: 1

Related Questions