dirPagination: Search with api on page 2 refreshes the page

[alateefah]

Hi

Version -> "angular-utils-pagination": "^0.11.1"

Description of issue: I have 2 apis, data api (for the initial result, 10 items at a time and paged) and the second, search api (api to search table). When i search on page 1, then search result is displayed just fine but when i navigate to page 2 and search, after the search api is called, the data api is called too thereby reloading the api all over again

Steps to reproduce: Write api to fetch data and search data from api. Navigate to page 2 and search.

Expected result: displays search result irrespective of the page number.

Actual result: displays search result only in page 1. If search is done in page 2, the data api is reloaded after search api.

Any relevant code:

     scope.getErrorTerminals = function( pageNumber ) {

            scope.search = "";

            scope.searched = false;

            let pageNum = pageNumber ? pageNumber : scope.errorPageNum;

            scope.errorPageNum = pageNum;

            scope.errorTerminalsError = null;

            scope.loading = true;

            scope.showFileSizesColumn = false;

            CampaignService.campaignTerminalsByStatus (scope.campaign.id , 'error', pageNum)

                .then((data) => {

                    scope.$evalAsync(() => {

                        scope.totalCount = data.noOfRecords;

                        scope.errorTerminalsData  = data;

                        scope.errorPageNum = data.currentPageNumber;

                        for (var count = 0; count < data.list.length; count++ ) {

                            data.list[count].lastDate = new Date((data.list[count].lastDate).replace(/-/g,'/'));

                        }

                        scope.errorTerminals = data.list;

                        scope.loading = false;

                    });

                }, (error) => {

                    scope.$evalAsync(() => {

                        $scope.errorTerminalsError = err.toString();

                        scope.loading = false;

                });

            });

        };

      scope.searchTerminals = function(searchTerm) {

            scope.searched = true;

            let pageNum = scope.searchPageNum;

            scope.errorTerminalsError = null;

            scope.loading = true;

            scope.showFileSizesColumn = false;

            CampaignService.searchErrorTerminalsById (scope.campaign.id, searchTerm, pageNum)

                .then((data) => {

                    scope.$evalAsync(() => {

                        scope.totalCount = data.noOfRecords;

                        scope.errorTerminalsData  = data;

                        scope.searchPageNum = data.currentPageNumber;

                        for (var count = 0; count < data.list.length; count++ ) {

                           data.list[count].lastDate = new Date((data.list[count].lastDate).replace(/-/g,'/'));

                        }

                        scope.errorTerminals = data.list;

                        scope.loading = false;

                });

            }, (error) => {

                scope.$evalAsync(() => {

                    scope.errorTerminalsError = error.toString();

                    scope.loading = false;

                });

            });
        };

                <table class="ui celled striped table" ng-show="!errorTerminalsError && errorTerminals.length && !loading">

        <thead>

            <tr>
                <th class="one wide center aligned collapsing">

                    <div class="field atm-checkbox-field" ng-click="checkboxAllClicked()">

                        <div class="ui fitted checkbox">

                            <input type="checkbox" tabindex="0" class="hidden" value="all">

                            <label></label>

                        </div>

                    </div>

                </th>
                <th> Terminal ID </th>

                <th> Last Communication </th>

                <th> Error Description </th>

                <th ng-show="showFileSizesColumn"> File Size </th>

                <th> Action </th>

            </tr>
        </thead>

        <tbody>

            <tr dir-paginate = "errorTerminal in errorTerminals | itemsPerPage: 10" total-items="totalCount" pagination-id="errorTable" current-page="pagination.current">

                <td class="one wide center aligned collapsing">

                    <div class="field atm-checkbox-field" >

                        <div class="ui fitted checkbox" ng-click="checkboxClicked($event)">

                            <input type="checkbox" tabindex="0" value="{{ errorTerminal.terminalId }}">

                            <label></label>

                        </div>

                    </div>

                </td>

                <td> {{ errorTerminal.terminalId }} </td>

                <td> {{ errorTerminal.lastDate | date : "yyyy-MM-dd HH:mm:ss" }} </td>

                <td> {{ errorTerminal.status }} </td>

                <td ng-show="showFileSizesColumn">

                    <div  id="fileSize{{errorTerminal.terminalId.trim()}}">

                    </div>

                </td>

                <td>

                    <div>

                        <button class="ui tiny secondary button" ng-click="resendErrorTerminal( errorTerminal.terminalId )" id="resend{{errorTerminal.terminalId}}">
                            Re-send
                        </button>

                    </div>
                </td>
            </tr>

        </tbody>
    </table>

    <dir-pagination-controls ng-show="!errorTerminalsError && errorTerminals.length && !loading"
                             max-size="8"
                             direction-links="true"
                             boundary-links="true"
                             on-page-change="getErrorTerminals(newPageNumber)"
                             pagination-id="errorTable"
    >
    </dir-pagination-controls>

`