Smart Tables Pagination Wont Work With Server Side Filtering

Question

I have a smart table that I am working on in AngularJS. The table uses a custom pipe in order to search and sort its data. I also require that the table has working pagination, along with a drop down box so you can select the number of rows to be displayed (think datatables).

For searching and sorting, the custom pipe fires off my ajax requests without a problem. However, when I click on any of the page numbers or change the number of rows to show, the pipe is NOT fired.

The page numbers seem to be set to call setPage(page) (this is set by the st-pagination directive) but nothing happens - and no errors are thrown.

How do I get the custom pipe to fire upon changes to the number of rows displayed or when a page # is clicked in the 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);
    });
}

})

Nocti

did you ever resolve this? I seem to be having the same problem and also tried the tableState.pagination.numberOfPages fix the one answer below suggested without any improvement. – Minnieminnnie

I did. The solution below was my final solution. – Nocti

Answer 1

In order to get smart tables to fire the filters off, you have to set the numberofpages on data load. To get the above filter to work simply add:

tablestate.pagination.numberOfPages = response.totalPages;

Smart Tables seems to require this to be set in order for it to properly bind the events.

Nocti