Smart Tables Pagination Wont Work With Server Side Filtering

Question

I have a smart table I'm working on in AngularJS. The table uses a custom channel to search and sort data. I also require the table to work paginated along with a drop-down list so that you can choose the number of rows to display (think about dates).

For searching and sorting, the custom channel disables my ajax requests without problems. However, when I click on any page number or change the number of lines to display, the pipe does NOT start.

It seems that page numbers are set to call setPage (page) (this is specified by the st-pagination directive), but nothing happens - and no errors occur.

How can I make a custom channel work when the number of displayed lines changes or when I click on page # in pagination controls?

Here is my HTML:

<table class="table table-striped table-bordered" st-table="leadsCollection" st-safe-src="leads" st-pipe="serverFilter"> ... <tbody> <tr data-toggle="modal" data-target="#modal-source" ng-repeat="source in leadsCollection" ng-click="rowClick($index);"> <td>{{source.leaddate}}</td> <td>{{(source.distance > 100) ? 'Long Distance' : 'Local'}}</td> <td>{{source.origin_city}}, {{source.origin_state}}</td> <td>{{source.destination_city}}, {{source.destination_state}}</td> <td>{{source.est_move_date}}</td> <td>{{source.distance}} mi</td> <td>{{source.number_bedrooms}} br</td> <td></td> </tr> </tbody> <tfoot> <tr> <td colspan="8"> <div class="form-group col-md-1"> <label>Show:</label> <select class="form-control" ng-model="itemsByPage"><option value="10">10</option><option value="25">25</option><option value="50">50</option><option value="100">100</option></select> </div> <div class="pull-right" st-pagination="" st-items-by-page="itemsByPage"></div> </td> </tr> </tfoot> </table> 

And here is the controller:

 .controller('Leads', function ($scope, $http) { $scope.leads = []; $scope.leadsCollection = [].concat($scope.leads); $scope.itemsByPage = "10"; $scope.rowClick = function (idx) { $scope.editor = $scope.leads[idx]; } $scope.serverFilter = function(tablestate) { $http.post("/portal/api/loadleads",tablestate).success(function(response){ console.log(response); $scope.leads = response; $scope.leadsCollection = [].concat($scope.leads); }); } }) 

Answer 1

To make smart tables turn off filters, you must set the number of pages to load data. To make this filter work just add:

 tablestate.pagination.numberOfPages = response.totalPages; 

Smart Tables seems to require this to be configured to properly bind events.