The filtering functionality of ngTable is limited to only the initial page

Dealing with an ngTable that contains over 1000 records. Everything is functioning correctly, except for the filter. The issue I am encountering is that the filter only applies to text on the active page. For example, if I am on page 3 and search/filter using a textbox, it will only show results from page 3.

The code I am using is:

$scope.$watch("filter.$", function () {
    $scope.tableParams.reload();});


$scope.tableParams = new ngTableParams({
        page: 1,            
        count: 10,          
        sorting: {
            schoolName: 'asc'     
        }
    },
{
    total: $scope.schoolInfo.length, 
    getData: function ($defer, params) {
        var filteredData = {};

    var orderedData = $filter('orderBy')($scope.schoolName, params.orderBy());

         params.total(orderedData); 

         $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
    },$scope:$scope
    });

The sorting functionality works perfectly, but the search is the problem.

Search:

<input type="text" ng-model="search.schoolName">
I have also tried using ng-model="search" as well.

<tr ng-repeat="mydata in $data | filter:search">
I have also attempted using search:strict

I have tried various solutions without success. Can someone please assist me?

Thank you in advance

Answer №1

Check out this insightful demonstration showcasing the functionality of the ng-table: Table demonstrating sorting and filtering

Consider adapting your code to incorporate elements from this illustrative example.

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

Is my code incorrect, or is JQUERY failing to load correctly?

I'm currently experimenting with jQuery methods for ajax in order to create a dropdown menu. Below is the jQuery code I am using: JAVASCRIPT: <SCRIPT> $("select[name='carid']").on("change", function() { $.post( ...

Why does my function consistently notify me that my answer is incorrect?

I've created a fun Pi quiz function that awards half a point for each correct digit you type. However, even if I enter just '3', it always shows as incorrect. Can someone assist me with this issue? function pi() { var piWithoutDecimals ...

Utilize Function to Gain Access to React Context

As I work on developing a package that enhances the responsiveness of my React widget, I have encountered an issue. The responsiveness now relies not on the viewport width, but rather on the width of the widget container element. Presently, I am wrapping ...

Duplicate the initial div and insert it after the following div by targeting its class name

I have a structure that looks like this: <div class="container"> <h1 class="header-div">Title 1</h1> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <div class="image-div"> ...

Leveraging a JavaScript variable within a PHP snippet

Similar Question: Sending a PHP string to a JavaScript variable with escaped newlines Retrieving a JavaScript variable from PHP I am trying to work with a Javascript function that accepts one variable, having some PHP code embedded within it. I am ...

Display a modal and hold until the user clicks on a button within the modal using AngularJS

Please, I am in need of assistance. I have been utilizing Dan Wahlin's service from and calling it within my controller. Upon displaying the modal, I would like to halt the execution of subsequent code until the user has clicked the OK button withi ...

Assign object values only using Object.assign

I have two objects. One serves as the original source object, while the other is a deep copy of the source object with potentially different values. For example: { id: 123, people: [{ name: "Bob", age: 50 }, { name: "Alice", ...

"A currency must be designated if there is a value present in a monetary field" - The default currency is established

I've encountered a major issue with one of my managed solutions. I have a customized workflow that generates multiple custom entities, each with various money fields. Here's the scenario when I trigger my workflow: The custom workflow enters a ...

Ways to move code from a route to a component

My question is about the routing setup: <BrowserRouter> <Navbar /> <div className="container pt-4"> <Switch> <Route path="/" exact component ...

Using the push method to fill my array prevents ng-repeat from working as expected

ng-repeat is functioning properly with a static array, but not when I create the array dynamically. HTML <div ng-repeat="item in items">{{ item }}</div> The following code populates the array and displays the expected result in the HTML: $s ...

using multiple $mdPanels in a single controller

As a newcomer to Angular Material, I have been able to adapt fairly easily but have hit a wall due to the lack of extensive documentation. I have successfully implemented a dialog panel (similar to a modal for Bootstrap users) and it works well. However, ...

How can I troubleshoot the 'mdDialog console error' that says 'cannot read property element of null'?

Two of my templates are named Left_template_view_html and center_template_view_html When I click on a md-button in the Left_template_view_html I am attempting to display an mdDialog on the document.body What should I pass into the parent parameter: angu ...

Angular.js encountered an error at line 13550: [ng:areq] The argument 'popCntrl' is expected to be a function, but it was undefined

I have been diving into learning AngularJS on my own recently, and I've been attempting to create a basic popup feature. However, I keep encountering the error mentioned in the title. While searching for solutions, I haven't found any examples th ...

Creating various rows within a loop can be achieved by using conditional statements to determine

I am faced with a challenge of handling an array of images, among other properties, and I aim to achieve the following outcome: https://i.sstatic.net/BYajY.png As the images reach the end of the container (which fits 4 images on desktops and adjusts for ...

Choose the root node in a JavaScript object

Given the following list: table:any[] = [ { name: 'A1 - John Doe', icon: 'user-name', bold: true, code: 'NY', open: false, items: [ { name: 'D3_AIR_ASBJHABSJAS&ap ...

Voice crashes in Discord.js after the audio has been playing for a short while

Every time I try to play a song, the bot crashes and gives an "aborted" error message after about a minute. music = { "resource": createAudioResource(ytdl(parameters[0], {filter: "audioonly"}), {inputType: StreamType.Arbit ...

Tips for using jQuery to identify the most recently modified row in an HTML table

Is there a way to identify the most recently modified (either newly added or changed) row in an HTML table? ...

What is the reason for `change()` not being defined in the constructor? Is it supposed to be accessed through the `__proto__` link in `

Why is the change() method not defined in the constructor? Shouldn't it be accessed through the proto link in the p.proto? // The first change() is not defined, why? class Person { constructor() { console.log(this) console.log(this.__prot ...

What is the method for assigning a class name to a child element within a parent element?

<custom-img class="decrease-item" img-src="images/minus-green.svg" @click="event => callDecreaseItem(event, itemId)" /> Here we have the code snippet where an image component is being referenced. <template&g ...

JQuery's animations and their influence on element positioning

My thumbnail animation increases in size on hover, but it is affecting the position of the other images. The issue is that when hovering over an image, the others move down and to the right to make space for the animated one. I want the other images to st ...