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...

javascriptangularjssmart-table

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Discover the benefits of utilizing router.back() cascade in Next/React and how to effectively bypass anchor links

Currently, I am working on developing my own blog website using Next.js and MD transcriptions. The issue I am facing involves anchor links. All the titles <h1> are being converted into anchor links through the use of the next Link component: <Link ...

javascripthtmlreactjsnext.js

Submitting forms using AJAX in Django

I am getting a 'Not Ajax' response every time I try to submit my form. There must be something small that I'm overlooking... class VideoLikeView(View): def post(self, request): if request.is_ajax(): message = 'Aj ...

javascriptjquerypython-3.xdjangoajax

What is the best way to position an image alongside text using Vue and Buefy?

I'm looking to add an image next to my text in Vue using Buefy. Take a look at the code I have so far, can someone offer some guidance? <template> <section class="hero is-link is-fullheight-with-navbar"> <div cla ...

javascriptvue.jsbulma

Issue encountered during Heroku deployment: Failed to build React app. When attempting to push changes to Heroku, an unexpected end of input error was received instead of the expected result. This error occurred on an unidentified file at

Encountering a parsing error while attempting to deploy a React app on Heroku using git push heroku master. The app built successfully yesterday, but since then some media queries were added by another contributor to various .scss files. The primary error ...

javascriptreactjsgitherokunpm

Traversing through nested states in ui-router without refreshing the parent state

In my current project, there are multiple organizations featured. Each organization page consists of two main sections: a header displaying organization information that should only load once, and a tabs zone for navigating different sections. I have imple ...

angularjsangular-ui-router

Refresh web content dynamically without having to reload the entire page using JavaScript

Currently, I am struggling to find a solution on how to dynamically update a section of a webpage using JavaScript when a user modifies an input field in another part of the same page. Unfortunately, my use of document.write is inhibiting me from making th ...

javascriptdom-events

Is there a Webpack plugin available that can analyze the usage of a function exported in a static

Just to clarify, I am presenting this theoretical scenario on purpose, as it reflects a genuine issue that I need to solve and am uncertain if it's feasible. Imagine I have a JavaScript package named road-fetcher, containing a function called find wh ...

javascriptnode.jswebpackoptimizationstatic-analysis

Unlocking the Power of Session Variables in AngularJS using Ui-router

Currently, I am utilizing Angular to manage routes. On the server side, Passport is being used so that I can access the user session variable req.user in my views. However, when dealing with a route rendered by ui-router, my req.user ends up being undefine ...

javascriptnode.jssessionexpressangular-ui-router

The FontLoader feature seems to be causing issues when integrated with Vuejs

While working on a Vue project with threejs, I encountered an error similar to the one described here. The issue arose when attempting to generate a text geometry despite confirming that the path to the typeface font is accurate and in json format. ...

javascriptvue.jsthree.jssyntax-error

Update the variable in a PHP script and execute the function once more without the need to refresh the page

Hey there, I'm wondering if AJAX is necessary for the functionality I want to implement. Here's the scenario: I have a function that generates a calendar and I plan to add 'forward' and 'backward' arrows so users can navigate ...

phpjavascriptjqueryajaxcalendar

Locate the index of each distinct element within the array

Let's define an array called 'arr' with some elements: [7, 9, 30, 40, 50, 8, 1, 2, 3, 40, 90,2, 88,1] We also have another output array defined as: [0, 1, 2, 3, 4, 5, 6, 7, 8 ,10, 12] I stored this code snippet on a javascript ...

javascripthtmlarraysalgorithmsorting

Axios fails to input data into the table

Having trouble with my axios request to insert.php. The variable note_text is coming back as null. I suspect it's because I'm not properly specifying the 2nd argument. My assumption was that there would be a variable like $ _POST['note_text ...

javascriptphpvue.jsaxiosbackend

"Moisten" a JavaScript object instance using a JSON array, similar to the way PHP does

When populating PHP objects with data, I typically use the following method: public function hydrate(array $data){ foreach($data as $key=>$value){ $method = 'set'.ucfirst($key); if(METHOD_EXISTS($this,$method)){ ...

javascriptphparraysjsonobject

Conceal the scrollbar and enable horizontal swiping using CSS

I have set up a container where I want the content to scroll horizontally from left to right on mobile devices, and I would like to be able to swipe to navigate while hiding the scrollbar. You can view the implementation on this JSfiddle link Do you think ...

javascriptjqueryhtmlcss

An issue encountered with res.download() following res.render() in Node.js

Just started working with Node JS and ran into an issue: Error: Can't set headers after they are sent. I've checked my code, and the problem seems to be related to res.download(); Is there a way to display the view without using res.render()? ...

javascriptnode.jsexpressejs

The Ajax form is failing to send any headers

Whenever I submit my form, the header data doesn't seem to be coming through. Even though I've done this type of submission numerous times (figuratively speaking), there's always a chance that I might be overlooking something. Any ideas? Che ...

javascriptjqueryajax

Encountered an issue while attempting to connect MongoDB to Node.js

``const timeoutError = new error_1.MongoServerSelectionError(Server selection timed out after ${serverSelectionTimeoutMS} ms, this.description); .MongoServerSelectionError: connect ECONNREFUSED ::1:27017 const {MongoClient}=require('mongodb'); c ...

javascriptnode.jsmongodbexpress

What is the most efficient way to move queried information from one table to another while maintaining all data entries?

Currently, I am working on a small POS project. In this project, I have two tables. The main purpose of the first table is to retrieve products from a search box with two column names retrieved from the database. If the products are found, I want to be abl ...

javascriptjquerysql

Integrating external JavaScript libraries into Ionic using the correct process

For the last few months, I have been utilizing jQuery Mobile for a hybrid app. Now, I am interested in exploring Ionic and Angular.js, so I am attempting to reconstruct it. My current JQM application relies on xml2json.js, but I do not have any experience ...

javascriptangularjsnode.jscordovabower

Unable to locate the JavaScript/jQuery key

Struggling with a dictionary in JavaScript being passed to a function in Django. Despite the key existing, I'm getting an error saying 'key message not found'. As a newbie in Javascript and JQuery, I must have made a simple mistake somewhere ...

javascriptjqueryhtmldjango