Angular pagination with enforced ellipses using Bootstrap

I have encountered an issue with pagination on the Plnkr I created. You can check out the problem here: http://plnkr.co/edit/YQAUCg5vjcgS1BEGB4nY?p=preview. Essentially, I have a large number of pages and I have set the attribute force-ellipses = true to display ellipses instead of showing 200 pages. However, this solution does not seem to be working as expected. I am using Angular Bootstrap 2.3.1 and I suspect that might be causing the problem. Unfortunately, I am unable to switch to a different version. Is there a way to resolve this issue?

<pagination
    num-pages="noOfPages" 
    current-page="currentPage" 
    max-size="maxSize"
    boundary-link-numbers="true"
    rotate="true"
    force-ellipses="true">
</pagination>
javascriptangularjspaginationangular-bootstrap

Answer №1

It seems that the implementation of uib-pagination may not be correct. The current syntax for this in the latest version is as follows:

<div uib-pagination total-items="total_items" max-size="maxSize" class="pagination-sm" boundary-link-numbers="true" rotate="false"></div>

You can see an example of this implementation in this plunker.

Alternatively, I find dir-pagination to be more convenient and easier to use.

For more information on dir-pagination, you can visit the angularUtils repository.

You can also view an example of dir-pagination in action in this Plunker demo.

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 is the best way to streamline the if statement in JavaScript?

Here is the given code snippet: public noArtistBeingEdited(): boolean { if (this.isFirstNameBeingEdited()) { return false; } if (this.isLastNameBeingEditable()) { return false; } return true; } What are some ways to ma ...

javascript

Adding icons to form fields based on the accuracy of the inputs provided

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Assignment 2 - Website Bui ...

javascripthtmlcssformsicons

Guide on how to prevent Paste (Ctrl+V) and Copy (Ctrl+C) functionalities in a TextField within MaterialUI

Is there a way to restrict the Paste (Ctrl+V) and Copy (Ctrl+C) functions in a specific TextField within MaterialUI? I am currently working with ReactJs ...

javascripthtmlcssreactjsmaterial-ui

Maintaining a live Angular website

I'm currently in the process of developing a website for a family friend using Angular as a Single Page Application with three main 'pages'. After completion, my plan is to package it into an html, css, and js file. I've also secured th ...

angularjsnode.jssasswebweb-hosting

Adjust the output number in a JavaScript BMI calculator to the nearest whole number when using the

Hey there, I'm currently working on a beginner project and could use some assistance. My project involves creating a basic BMI calculator using metric units, but I seem to be encountering issues with rounding numbers. Here is a snippet of my code: var ...

javascript

Error encountered in Angular/Karma/Jasmine: Trying to access a property or method (commLogger.SetLogLevel) on an undefined object

I'm currently learning about Karma and Jasmine Unit Testing, but I've run into an error that I can't seem to find a solution for on this site or anywhere else. Below is the code snippet from my unit test file: describe('CommLogger&apo ...

angularjsjasminekarma-runner

Determine the specific table entry that was clicked on

Currently, I am working on developing a dynamic table that includes a button in one of its columns, which triggers a bootstrap modal. I'm a bit unsure on how to determine which button was clicked and how to populate the table accordingly. Admittedly, ...

javascriptcsstwitter-bootstrappug

Setting header details for optimal data transfer

Currently, there is a Java code snippet that I am working on which attempts to access the header information sent by an HTML page. Unfortunately, I do not currently have the specific HTML page in question. However, I still need to be able to access and m ...

javajavascripthtmlhttpheader

When combining React and ReactDOM with browserify, the resulting bundle size exceeds that of react.min.js and react-dom.min.js

I'm currently working through the React beginner's tutorial and things are going smoothly so far. However, I decided to delve into importing external packages and began using tools like npm, browserify, watchify, etc. In the tutorial, there is a ...

javascriptnode.jsreactjsbrowserify

Sending JSON data from an iOS app to a Flask backend

Within my Flask Python web application, I store certain parameters in SessionStorage to later send back to Flask and save this data as a text file. Interestingly, the process functions perfectly on PCs and Android devices but encounters issues on iOS devi ...

javascriptpythoniosjsonflask

Ensure exclusive access to variables for sequential updates in jQuery or JavaScript

I am currently developing a series of small functions in jQuery aimed at tracking how long it takes for a user to complete a form. The form consists of various input types and 'continue' buttons located within the form itself. Below are some sa ...

javascriptjquery

Converting the length attribute of a table to a string does not yield any

After grappling with this bug for some time now, I've come up empty-handed in my search for a solution online. Expected Outcome: Upon pressing the create row button, I anticipate a new row being added at the bottom of the table. This row should cons ...

javascripthtmlhtml-table

Assigning an identification number to specify the type of Chip

I am currently working on a project involving Material UI "Chips" that contain text and serve as references. Within the context of my project, I have Chips for both White Advantages and Black Advantages sections. However, there are instances where these Ch ...

javascriptreactjsmaterial-ui

Exploring nested object values in React Js through iteration

I have been searching extensively for a solution to no avail. I have an object created from fetched data with the following structure: { id: string, title: string, price: { currency: string, amount: number, }, ...

javascriptreactjsloopsobjectnested

React child component does not refresh upon modification of an array property

In my main application, I have two subcomponents that both receive the same model property. The first subcomponent deals with a number prop from model.myNumberProperty, and the second subcomponent handles an array prop from model.myArrayProperty. When ch ...

javascriptreactjsreact-hooks

Discover the file system using AngularJS or jQuery

Currently, in my project I am utilizing angularjs in conjunction with the spring framework to dynamically generate jasper reports and store them in the file system using the following code snippet: File newFile = new File("/home/person/report"); This al ...

angularjsspring-bootfilesystems

Angular UI Grid failing to properly display date formatting

Currently, I am using Angular's UI Grid to showcase multiple columns. However, I am facing an issue with formatting the date column. The date is being displayed as /Date(1451346632162-0000)/, and similar formats. I have attempted to apply filters in ...

javascriptjqueryangularjsfilterangular-ui-grid

At times, Mongoose may return null, while other times it returns data frequently

I have designed a unique mongoose schema for managing contacts, with a custom defined ID. Here is the schema structure: const mongooseSchema = new mongoose.Schema({ _id:{ type:String, unique:true, required:true }, firstN ...

javascriptnode.jsmongodbexpressmongoose

Accessing data from a Vue component externally

Utilizing Vue loaded from a script (not a CLI) in a file named admin.js, I have multiple components that interact with each other by emitting events. No Vuex is used in this setup. Additionally, there is another file called socket which creates a websocket ...

javascriptsocketsvue.jscomponents

Encountering invalid parameters while attempting to utilize the track.scrobble service from the Last.Fm API in a Node.js application

After successfully completing the Last.Fm authentication process following the instructions provided here, I received the session key without any issues. However, my attempts to make an authenticated POST request to the track.scrobble method of the Last.Fm ...

javascriptnode.jslast.fm