Smart Table: set page programmatically

Question

I'm using Smart Table and want to jump to a specific page once the controller is created and the table is displayed.

I found this snippet of code to do this programatically here on stackoverflow:

angular.element( $('#pagination') ).isolateScope().selectPage(pageNumber);

"pagination" is the HTML id of my Smart Table's pagination div. I can't call this until the controller exits as isolateScope returns "undefined". So I thought I'd call it a few milliseconds afterwards to ensure the table/page has been fully created.

selectPage works from my custom pagination, it works if I call it from a button at the bottom of the page, but NOT if it is called from a timer. I've traced the source into Smart Tables selectPage() and pipe() functions and I can't see the difference - one works, and the other doesn't.

See the Plunker: Press one button and it will jump to Page 5 as expected. Press the other button to set a 3s timer which should jump to page 2, and nothing happens...

here I used a directive to make sure the code runs when DOM is ready (plus I waited 1s..) http://plnkr.co/edit/uKAz5yg5Qk0puXtDUu8X?p=preview altough this code doesn't seem stable enough — Nitsan Baleli, Apr 30 '17 at 15:33
Thanks for that. It seems to work. Why do you think it isn't stable? — Tim Cobra, Apr 30 '17 at 16:23
but... it still doesn't explain why my Plunker doesn't work :-( frustrating. — Tim Cobra, Apr 30 '17 at 18:14
in your plunker, only the pagination works. there's only one green button 'Goto page 5' that doesn't work (you didn't assign the setPage function to the scope/controller) — Nitsan Baleli, May 01 '17 at 06:40
@Nitsan Baleli - Apologies, I must have gone back a version on the [Plunker](http://plnkr.co/edit/wnmYqAGveXqf1xYyhLr4?p=preview). Link is correct now. I do notice that pressing the timer button once, nothing happens, press again and it jumps straight to page 2... weird. Interested to know why it is happening, but will use the answer below :-) — Tim Cobra, May 02 '17 at 11:30

score 3 · Accepted Answer · answered May 01 '17 at 07:53

Apparently, there's a better way for communicating with smart-table from the 'outside'.

If you move the st-table directive to an outer div (in this case to the body):

<body ng-controller="mainCtrl" st-table="displayed">

then we can create a directive that will require the plugin's controller and use its functions:

app.directive('handlePagination', function ($timeout) {
    return {
        require: '^stTable',
        restrict: 'AE',
        transclude: true,
        template: '<button class="btn btn-success btn-xs" ng-click="" ng-transclude></button>',
        scope: {
          goToPage: '@',
          delay: '@'
        },
        link: function link(scope, element, attrs, controller) {
            scope.delay = scope.delay || 0;
            element.on('click', function() {
              var page = scope.goToPage; 
              if (page > 0 && page <= controller.tableState().pagination.numberOfPages) {
                $timeout(function() {
                   controller.slice((page - 1) * controller.tableState().pagination.number, controller.tableState().pagination.number);
                }, scope.delay) 
              }
            })
        }
    };
});

see this plnkr

Thanks!! This work very well. Smart Table should detail this in their advanced documentation. — Tim Cobra, May 02 '17 at 18:27

Smart Table: set page programmatically

1 Answers1