Using jQuery tableSorter plugin with Angularjs

Question

I'm trying to use the JQuery tablesorter plugin working along with Angular. Currently if you click on any column for sorting the entire width and structure of the table changes and a new row with the ng-repeat expressions is created.

$(document).ready(function() {
    $("#check").tablesorter();
});

 

<table id="check" class="table table-bordered table-striped table-condensed table-hover tablesorter" cellspacing="1">
    <thead>
        <tr>        
            <th class="header">Product Code#</th>
            <th class="header">Item Description#</th>
            <th class="header">Unit Cost#</th>
        </tr>
    </thead>
    <tbody>
        <tr ng:repeat="i in itemresponse" >
            <td><a href="#/ItemSearch/{{i._ItemID}}" >{{i._ItemID}}</a></td>
            <td>{{i.PrimaryInformation._ShortDescription}}</td>
            <td>{{i.PrimaryInformation._UnitCost}}</td>
        </tr>
    </tbody>
</table>

Answer 1

You're doing it wrong.

If you want to sort rows in a table with AngularJS, you should use the orderBy filter. There is no need to include another framework. Once you have made that leap, you can find a plethora of samples online (or on SO).

See for example this fiddle: http://jsfiddle.net/uRPSL/1/

Answer 2

Fortunately there's an Angular Module called ng-table.