How can I prevent the next button from being clickable on a ui bootstrap pagination?

I have successfully implemented pagination on my page using a pagination control. Everything is working well, but I am unsure about how to manually disable the next button.

<pagination   
    total-items="totalItems" 
    items-per-page= "itemsPerPage"
    ng-model="currentPage" 
    class="pagination-sm"  
    page="currentPage"
    max-size= "maxSize"
    ng-change="pageChanged(currentPage)">
</pagination> 

In my controller-

$scope.currentPage = 1;
$scope.itemsPerPage = 5;
$scope.maxSize = 2;
$scope.numberofrows = 5;

$scope.fetchResult = function(startingId) {
    if (startingId == undefined) {
        $scope.StartingId = '';
    } else {
        $scope.StartingId = startingId;
    }
    Api.customerReq.queryProductbyperiod({ productId: $scope.customerProduct, productperiod: $scope.customerPeriod, startingid: $scope.StartingId, numberofrows: $scope.numberofrows }).$promise.then(function(result) {
        if (result) {
            if (result && result.length == 0) {
                // error alert 
            }
            $scope.customerResult = result;
            if ($scope.currentPage == 1) {
                $scope.NextStartingId = result[5].id;
            } else {
                $scope.NextStartingId = result[4].id;
            }

            $scope.previousStartingId = $scope.NextStartingId;
            if ($scope.currentPage == 1) {
                $scope.totalItems = result.length;
            }

            $scope.pageChanged = function(page) {
                if (page > $scope.count) {
                    $scope.count++;
                    $scope.nextPage();
                } else {
                    $scope.count = page;
                    $scope.prevPage();
                }
            };

            $scope.prevPage = function() {
                if ($scope.currentPage == 1) {
                    $scope.previousStartingId = '';
                }
                $scope.fetchResult($scope.previousStartingId);
                if ($scope.currentpage > 1)
                    $scope.totalItems -= 5;

            };
            
            $scope.nextPage = function() {
                if($scope.currentPage != 1){
                     $scope.numberofrows = 5;
                 }      
                 $scope.fetchResult($scope.NextStartingId);
                 $scope.totalItems += 5;     
            };

On each page change, the next and previous pages are being called. How can I manually disable the next link in this scenario or make the datepicker work?

Each time I click the next or previous button, an API request is made as Cassandra has limited support for pagination. I query with the stored string ID to filter results from an ordered list in the Cassandra table, essentially performing server-side pagination.

Answer №1

With UI Bootstrap, the next link will be disabled automatically when there are no pages to display. There is no need to utilize ng-change for disabling pagination items. This feature is intended for other actions such as confirmation dialogs or Ajax requests. To determine if the next link should be disabled, you can use the following formula:

TotalItems / ItemsPerPage - MaxSize

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

What steps should I take to display my Angular application on my hosting as a website?

After successfully completing the Tour of Heroes tutorial, I feel confident in my ability to modify and have fun with it. I obtained a git repository from Visual Studio Team Services for the app. However, I'm now unsure of how to transfer the app to m ...

Main focus: Implementing dynamic data writing in this particular code scenario

Having trouble dynamically writing data inside my HTML table using JavaScript. As a newcomer to frontend development, specifically JS, I am seeking guidance on making this work smoothly. I've attempted methods like .innerHTML and .innerText without mu ...

JavaScript and CSS failing to implement lazy loading with fade-in effect

Is there a way to add the fade-in animation to an image when it is loaded with JavaScript or CSS? Currently, the code I have only fades in the image once it is 25% visible in the viewport. How can I modify it to include the fade effect upon image load? ...

What is the best way to condense all JavaScript and CSS files in MEAN.JS for a production setting?

I recently finished creating a basic MEAN.JS application. When using MEAN.JS, I can use the command grunt build to minify the js and css files located in specific folders: css: [ 'public/modules/**/css/*.css' ], js: [ 'public/config ...

Troubleshooting CORS Problem with AWS CloudFront Signed Cookies

I encountered an issue while implementing cloudfront signed cookies. When trying to access '' from '', the CORS policy blocked it due to absence of the 'Access-Control-Allow-Origin' header. This problem arose after rest ...

Retrieve user-specific relational data

In my Supabase database, I have three main tables: users, teams, and members. The users table stores information about all users who sign up using auth. Here are the details contained in this table: id displayname email 602eff1e-6300-491e-b821-44e ...

Troubleshooting issue with Ajax.Actionlink not canceling request using jQuery's onBegin

In the "onBegin" ajax option of an ajax.actionlink, I have a function that is called. function cancelAction() { $.ajax({ data: { p: "test", z: "value" }, url: '@Url.Action("DoSomething", "TestCtlr")', type: "GET", ...

Using AJAX in JavaScript within an HTML document is a valuable skill to have

I have the following JavaScript function that I need to call the /print2 function without clicking any buttons. I attempted to use Ajax for this, but I am new to Ajax and JavaScript. Can you help me identify where the issue might be? Thank you... <scr ...

Is there a way to programmatically retrieve and play multiple videos in a continuous loop directly from a designated folder using HTML?

I am looking to create a program using HTML/AngularJS that can dynamically retrieve videos from a folder without the need to manually list them. <video id="myvideo" width="320" height="240" controls style="background:black"> <source class="act ...

Creating a Dynamic Counter for Real-Time Message Updates in a Personal Messaging Application with jQuery

I am currently in the process of developing a Personal Message System for my website. My goal is to have the number of new messages in each chat displayed and updated in real-time, just like the red "box" showcased in the screenshot below: https://i.sstati ...

What is the best way to exclude HTML tags from the innerHTML attribute?

Currently, I am in the process of developing a messenger application and facing an issue where my messages are not ignoring HTML tags. This is happening because I directly paste the input text into the innerHTML of the message. The code snippet responsible ...

Click on the link in the listview to close the panel

I'm currently working on a jQuery mobile page that includes a panel with a listview. Each list item has a link with a data-rel="close" attribute, and I want the panel to close whenever a list item is clicked. It's important to note that I am als ...

A guide on encrypting the data of a file that is uploaded in Meteor.js

As a newcomer to Meteor and coding in general, I have completed tutorial projects and examples and now feel ready to start my own project. I want users to be able to select a file from their computer using an input field, read the contents of the file, and ...

What are the reasons for the slower runtime of node.js compared to the Google Chrome console

It's interesting to note that both Chrome and node.js operate on the same V8 javascript engine. Here is my take on it: Chrome, despite running internal executions, also handles additional UI tasks which could potentially slow it down On the other ha ...

Using Angular's async, you can retrieve a value returned by a promise

Within the library I am currently utilizing, there is a method called getToken which can be seen in the following example: getApplicationToken() { window.FirebasePlugin.getToken(function(token) { console.log('Received FCM token: ' + to ...

index.ts import statement results in undefined value being returned

I have a simple file structure set up like this: src index.ts services my-service.ts In index.ts, I have the following code: export const a = 3 And in my-service.ts, I use the following import statement: import { a } from '../index' consol ...

When using Javascript in a JSP page, it may not always read every element within an array

A project I'm currently working on involves developing a web application that prompts users to input estimated costs for various items. To accomplish this task, I am utilizing a JavaScript function to generate the necessary fields dynamically. var fi ...

What is preventing AngularJS from being invoked in Microsoft Dynamics CRM 2015 on IE11?

I created a ribbon button to open an HTML page from my web resources. After adding an example.html page with code borrowed from W3 schools, I encountered an issue: <!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/ang ...

Is there a way to determine what is affecting the properties of an element?

I've been grappling with a chunk of lengthy HTML, styles, and javascript. My mission? To uncover whatever magic is changing the text within a specific element. <span class="panel-title"> I'm a Panel with All Options</span> Transform ...

Javascript retrieve the style of an element in every possible state

I am interested in retrieving the line height of an element; it's a simple task. Here is a method that I know works: console.log(document.getElementById("myDiv").style.lineHeight); console.log($("#myDiv").css('lineHeight')) ...