Filter and show results from other pages

Question

I have a HTML page with a textbox and table to display data

<input id="search-term" type="search" placeholder="Search..." ng-model="vm.term.search" autocomplete="off" no-dirty-check>

<tbody>
    <tr ng-repeat="l in vm.logData | filter:{ Title : vm.term.search}">
        <td>{{l.Title}}</td>
        <td>{{l.Name}}</td>
        <td>
            <a id="resUp" ng-click="vm.resolve(l)" ng-show="vm.showResUpButton($index)">ResUp</a>
            <a id="resDown" ng-click="vm.resolveDown(l)" ng-show="vm.showResDownButton($last)">ResDown</a>
        </td>
        <td>
            ....
        </td>
    </tr>
</tbody>

I decided to add pagination (code not included) which works as intended. This links to my C# code to get the records by passing in the pageNumber, number of items to skip and how many records to take. Similar to

GetCategories(int pageNumber, int skip = 0, int take = 0)

The issue i face is when the page first loads it displays 10 results. If i search for an item which is listed in the 10 results shown, the table filters it to those items.

If an item is listed on page 2 or another page, those records are not returned back.

I understand why its doing this but i like the current way it displays/filters records as it feels nice and fast (as opposed to going back to the database to fetch more results and then display) is there a way when i search for a record it could also search for records not displayed in the current view?

Answer 1

For your stiuation we can say

• transclude (nested components can use shared scope) or

   component('yourGridOrList', {
        transclude: true
    }
  

rootscope for intercom. between components. inject rootscope then this this handler component Key: 'pagerClickedDoTheJob', passed data: data

    $rootScope.$on('pagerClickedDoTheJob', function(data){
            xxx = data;
       })

this is message sender component Key: 'pagerClickedDoTheJob', passed data: Data

  $rootScope.$emit('pagerClickedDoTheJob', data);