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>

Flyweight

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 – Miscellany

Check out the example at docs.angularjs.org/api/ng.filter:orderBy Creating a sortable table with AngularJS is possible without tablesorter. – Vancevancleave

Does this help you by any chance: plnkr.co/edit/VOf0DjZiKA2VxrWUDUgj?p=preview – Bomarc

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/

Dixson

Answer 2

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

Optical