Automated Desk: adjust page through programming

Question

Automated Desk: adjust page through programming

I am currently utilizing Smart Table and I would like to automatically navigate to a specific page once the controller has been created and the table is displayed.

After searching on stackoverflow, I came across this code snippet that allows me to achieve this programmatically here:

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

The HTML id of my Smart Table's pagination div is "pagination". I have found that I cannot call this function until the controller exits as the isolateScope method returns "undefined". Therefore, I decided to delay the call by a few milliseconds to ensure that the table/page has been fully created.

Interestingly, the selectPage function works perfectly when called from my custom pagination or a button at the bottom of the page. However, it fails to work if triggered by a timer. I have delved into the source code of Smart Table's selectPage() and pipe() functions but I cannot identify why one approach succeeds while the other does not.

You can test this behavior on this Plunker: Click one button to jump to Page 5 as expected, then click the other button to set a 3-second timer which should navigate to page 2, but nothing happens...

javascript angularjs smart-table

Answer 1

Answer №1

There is a more efficient way to interact with smart-table from an external source.

If you simply relocate the st-table directive to a parent div (such as the body):

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

then you can develop a custom directive that will access the plugin's controller and utilize its features:

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) 
              }
            })
        }
    };
});

view the example on plnkr

Answer 2

There is a more efficient way to interact with smart-table from an external source.

If you simply relocate the st-table directive to a parent div (such as the body):

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

then you can develop a custom directive that will access the plugin's controller and utilize its features:

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) 
              }
            })
        }
    };
});

view the example on plnkr

Automated Desk: adjust page through programming

Answer №1

Similar questions

What is the process of incorporating a user into Openfire through AngularJS $http utilizing the OF RestApi?

Efficient method for handling numerous AJAX requests

Efficiently rendering a million elements on an HTML canvas (and replicating the render from the server)

Issue encountered: Trying to deploy firebase functions and hosting with vue-cli v3 and node.js leads to an error "No npm package found in functions source directory

Ways to emphasize search outcomes in Flask/HTML?

Prevent the duplication of objects within the current Angular model

How can I remove a row from a JavaScript array based on the value of the first item in the row?

Firestore query failing to retrieve most recent data

Fade In Effect in Angular 2 Using SwitchCase

What makes 'Parsing JSON with jQuery' unnecessary?

Leveraging the 'this' keyword in TypeScript

It appears that Apexcharts is not compatible with React/Next.js

Angular Material's $mdBottomSheet can be divided into thumbnail and text elements arranged side by side horizontally

Create a connection between a div and a React component, allowing for the seamless transfer of

Modifying data within nested objects using Typescript

Scenario-specific blueprints

Could the absence of an external style sheet for CSS be hindering the execution of my code?

Implementing Node.js on several domains with the help of express.vhosts()

What is the process for incorporating Express.js variables into SQL queries?

Struggling to access a remote URL through jQuery's getJSON function with jsonp, but encountering difficulties