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>

First thing I'd do is move the tablesorter call to a directive. You can change the priority of you directive to be called after ng:repeat is called. See youtu.be/iB7hfvqyZpg — Roy Truelove
Check out the example at docs.angularjs.org/api/ng.filter:orderBy Creating a sortable table with AngularJS is possible without tablesorter. — Der Hochstapler
Does this help you by any chance: plnkr.co/edit/VOf0DjZiKA2VxrWUDUgj?p=preview — eugenekgn

iwein iwein · Accepted Answer · 2014-03-22T06:59:27

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/

Using jQuery tableSorter plugin with Angularjs

2 Answers