CODEWITHSUNDEEP
javascriptangularjssmart-table
TheRocinante
TheRocinante

Reputation: 4201

angularjs smart-table programmatically sort

I have a table set up using the smart-table plug in for AngularJS. Everything appears to work nicely. Rather than having the user click on the table header to trigger a sort, I'd like to programmatically trigger sorting from my Angular controller. I do not see a way of doing this in the documentation here:

http://lorenzofox3.github.io/smart-table-website/

Am I overlooking something?

Upvotes: 2

Views: 1870

Answers (3)

Shomari Mosi
Shomari Mosi

Reputation: 11

Here is the 'angular' way to do this. Write a directive. This directive will have access to the smart table controller. It will be able to call the controller's sort by function. We will name the new directive stSortBy.

The below HTML includes the standard smart table syntatic sugar. The only new attribute directive here is st-sort-by. That's where the magic will happen. It's bound to a scoped variable sortByColumn. This is a string value of the column to sort

<table st-sort-by="{{sortByColumn"}}" st-table="displayedCollection" st-safe-src="rowCollection">
<thead>
<tr>
<th st-sort="column1">Person</th>
<th st-sort="column2">Person</th>
</tr>
</thead>
</table>

<button ng-click="toggleSort()">Toggle sort columns!</button>

Here is the stSortBy directive that hooks into the st table controller

app.directive('stSortBy', function() {
    return {
        require: 'stTable',
        link: function (scope, element, attr, ctrl) {
            attr.$observe('stSortBy', function (newValue) {
                if(newValue) {
                    // ctrl is the smart table controller
                    // the second parameter is for the sort order
                    ctrl.sortBy(newValue, true);
                }
            });
        }
    };
});

Here is the controller. The controller sets the sort by in it's scope

app.controller("MyTableWrapperCtrl", ["$scope", function($scope) {
  $scope.sortByColumn = 'column2';
  
  $scope.toggleSort = function() {
     $scope.sortByColumn = $scope.sortByColumn === 'column2' ? 'column1' : 'column2';
     // The time out is here to guarantee the attribute selector in the directive
     // fires. This is useful is you do a programmatic sort and then the user sorts
     // and you want to programmatically sort back to the same column. This forces a sort, even if you are sorting the same column twice.
     $timeout(function(){
      $scope.sortByColumn = undefined;
     }, 0);
  };
}]);

Upvotes: 1

Juan Carlos Ospina Gonzalez
Juan Carlos Ospina Gonzalez

Reputation: 4213

A quick hack i found on how to do this is by setting the table header st-sort property and then triggering a click() on that element 

<tr>
  <th id="myelement" st-sort="date" st-sort-default="reverse">Date</th> 
  ...
</tr>

Then later:

 setTimeout(function() {
      document.getElementById('myelement').click()        
    }, 
  0);

Upvotes: 1

Newbie
Newbie

Reputation: 152

Found this on JSFiddle, might help you: http://jsfiddle.net/vojtajina/js64b/14/

<script type="text/javascript" ng:autobind
src="http://code.angularjs.org/0.10.5/angular-0.10.5.js"></script>

<table ng:controller="SortableTableCtrl">
    <thead>
        <tr>
            <th ng:repeat="(i,th) in head" ng:class="selectedCls(i)" ng:click="changeSorting(i)">{{th}}</th>
        </tr>
    </thead>
    <tbody>
        <tr ng:repeat="row in body.$orderBy(sort.column, sort.descending)">
            <td>{{row.a}}</td>
            <td>{{row.b}}</td>
            <td>{{row.c}}</td> 
        </tr>
    </tbody>
</table>

Upvotes: 3

Related Questions