AngularJS pagination with filtering

Currently, I am using ng-paginate for pagination on my website. However, I have encountered a problem when applying filters. Specifically, I have a dropdown menu with 3 different options to choose from.

The issue arises when I select an option from the dropdown menu - only the data on the current page is filtered. For example, if I have a total of 100 records and display 10 records per page, the filter will only apply to those 10 records. I am in search of a solution where the filter can be applied to all records, not just the ones on the current page. Below is the code written in jade:

<label for="exampleSelect1">Vehicle-Mode
  <select id="exampleSelect1" name="opt" value="opt" ng-model="check" ng-change="getValue(check, fromDate, toDate)" class="form-control">
    <option>Booked</option>
    <option>checked_in</option>
  </select>
</label>
<tr dir-paginate="vehicle in vehicles | filter:search | itemsPerPage:1000">
  <td>{{xxx}}</td>
  <td>{{yyy}}</td>
</tr>
<dir-pagination-controls max-size="1000" direction-links="true" boundary-links="true"></dir-pagination-controls>

Answer №1

The answer was right there in their FAQs

Why is my sorting/filtering only working on the current page?

This issue commonly arises when the itemsPerPage filter is not placed correctly within the expression. For instance, take a look at this:

<li dir-paginate="item in collection | itemsPerPage: 10 | filter: q">...</li> <!-- INCORRECT -->

In the above example, the collection is first limited to 10 items by the itemsPerPage filter, and then filtering is applied to those 10 items only. To resolve this, ensure that the itemsPerPage filter is positioned after any sorting or filtering:

<li dir-paginate="item in collection | filter: q | itemsPerPage: 10">...</li> <!-- CORRECT -->

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

Having troubles with the xml2json jQuery plugin's functionality?

I've implemented the jQuery XML to JSON Plugin by Fyneworks.com. Any idea why my code isn't functioning as expected? index.html <!DOCTYPE html> <html> <head> <script src="build/jquery.xml2json.js"></script> <sc ...

The orderBy function is not functioning properly when used in conjunction with ng

I attempted to replicate the functionality demonstrated here, which involves organizing an array of objects in the view using the filter orderBy. While my code is functioning properly, when I apply the orderBy filter, nothing appears in the view. You can ...

React - Error occurred when parsing module: Unexpected Token. It is recommended to use a suitable loader to manage this file format

As a beginner in using React, I might be making obvious mistakes and I apologize for that. After researching similar bugs on various platforms like StackOverflow and GitHub, I couldn't find a solution that works for my specific issue. Here is the erro ...

Is it possible to dynamically set a style attribute in a Model based on the field's value?

In order to send alerts when a specific event is about to end, I have developed a CSHTML email template file. The goal is to notify users 10 minutes before the event ends and then again at 5 minutes before the end time. To distinguish between different typ ...

Function returning undefined when accessing prototype property in JavaScript

When attempting to create an image rotator using prototypal inheritance, I am encountering an error in the console showing: TypeError: this.curPhoto is undefined this.curPhoto.removeClass('previous'); I have placed this code in the callb ...

Issue encountered while initializing an HtmlPage with HTMLUnit

When attempting to execute the following code: try (final WebClient webClient = new WebClient(BrowserVersion.FIREFOX_45)) { webClient.getOptions().setJavaScriptEnabled(true); final HtmlPage page = webClient.getPage("http://www.chem ...

What is the best way to combine an array into a single string and insert it into a textarea with line breaks?

My current goal involves executing the following code with no success: var arr = ['one', 'two','three'] const mydiv = document.createElement('textarea') mydiv.innerText = arr.join('\r\n') docum ...

What is the reason behind a PHP page refresh causing a session variable to be released

In an attempt to unset a session variable after 2 minutes using unsetsession.php, I have the following code: <?php session_start(); if (isset($_SESSION['LAST_ACTIVITY']) && (time() - $_SESSION['LAST_ACTIVITY'] > 120 ...

Bootstrap typehead not activating jQuery AJAX request

I am attempting to create a Twitter Bootstrap typehead using Ajax, but nothing seems to be happening. There are no errors and no output being generated. Here is the jQuery Ajax code I have implemented: function CallData() { $('input.typeahea ...

Downloading a file utilizing Selenium through the window.open method

I am having trouble extracting data from a webpage that triggers a new window to open when a link is clicked, resulting in an immediate download of a csv file. The URL format is a challenge as it involves complex javascript functions called via the onClick ...

I have attempted to create custom code for the built-in JavaScript function (toLocaleUpperCase). Can this be considered helpful or not?

Using this JavaScript code snippet, you can convert lowercase letters to uppercase without relying on built-in functions. This is a helpful concept to understand for interviews and coding challenges. //change lower case to upper case function Change ...

Steps to develop a runnable Express API

After developing a basic yet fully functional Node.js Express API application using JavaScript, I am now looking to convert it into an executable file that can be run on Windows systems. The main reason behind this is to provide clients with the option of ...

What is the best way to create a nullable object field in typescript?

Below is a function that is currently working fine: export const optionsFunc: Function = (token: string) => { const options = { headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}`, } ...

SweetAlert html is not recognizing ng-app, but it functions correctly within the html body

When inserting a bootstrap table inside a SweetAlert, I encountered an issue where using ng-app or ng-repeat to populate data inside the table's rows did not call ng-app. However, when populating the table outside of the SweetAlert in the body, ng-app ...

Click to trigger image rotation with JavaScript

img { display: block; margin: 20px; width: 50px; height: 50px; } .crossRotate { -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-property: -webkit-tran ...

What is the best way to eliminate leading and trailing spaces from a text input?

I'm currently working on troubleshooting a bug in an AngularJS application that involves multiple forms for submitting data. One of the issues I encountered is that every text box in the forms is allowing and saving leading and trailing white spaces ...

Variables in operational controllers and traditional controller variables in Angular

Comparing Two Ways to Declare Models in AngularJS First Method: var app=angular.module('demo', []); app.controller('mainController',function(){ this.myVar='hello'; }); <script src="https://ajax.googleapis.com/ajax/ ...

What is the best way to change the state of a button in angular.js?

I am attempting to create a feature where the submit button is enabled only if all textboxes contain values, and disabled otherwise. However, the challenge I am facing is that the number of textboxes can vary dynamically, making it impossible to hardcode t ...

How can Angular retrieve products by sending a get request to an API?

I'm looking to showcase products on a website and I need to retrieve them by making a GET request to an API using Angular. I've attempted to follow the Angular documentation, but I can't seem to get it working. Any guidance or assistance wou ...

Is it possible for consecutive json and jsonp requests to fail on Crossrider?

I am currently utilizing crossrider to develop a plugin that works across various browsers. Within my implementation, I have two consecutive AJAX requests (one JSON and one JSONP): The first request involves a JSON call for "login" which sets a brows ...