Question

我试图在整个分页表上使搜索字段全局，但目前它只返回当前所选页面上存在的行。

我的JSP页面：

<body ng-controller="JobController as control" class="skin-blue">
    <!-- The field search -->
    <input type="text" class="form-control" placeholder="Chercher" ng-model="search">

    <!-- The Table paginated -->
    <table id="jobstable" class="table table-bordered table-striped">
        <thead>
            <tr>
                <th style="width: 40px;">ID</th>
                <th>Job</th>

            </tr>
        </thead>
        <tbody>

            <tr ng-repeat="doc in filteredJobs | filter:search">
                <td><span>{{doc.id_job}}</span></td>
                <td><span ng-bind="doc.titre"></span></td>


            </tr>

        </tbody>

    </table>
    <!-- Pagination -->
    <pagination ng-model="currentPage" 
                total-items="control.jobs.length"
                max-size="maxSize" 
                boundary-links="true" >
    </pagination>

</body>

这是我的AngularJS控制器：

'use strict';

App.controller(
                'JobController',
                [
                        '$scope',
                        'JobService',
                        function($scope, JobService) {

                            /**
                             * ******************** Pagination part
                             * *************************************
                             */

                            self.fetchAllJobs(); // All the records are retrieved

                            $scope.filteredJobs = [], $scope.currentPage = 1,
                            $scope.numPerPage = 10, $scope.maxSize = 5;

                            $scope.numPages = function() {
                                return Math.ceil(self.jobs.length
                                        / $scope.numPerPage);
                            };

                            $scope.$watch('currentPage + numPerPage',function() {
                                                var begin = (($scope.currentPage - 1) * $scope.numPerPage), 
                                                    end = begin + $scope.numPerPage;

                                                $scope.filteredJobs = self.jobs.slice(begin, end);
                                            });

                        } ]);// End of controller

Answer 1

我完成了将Jaydo建议改编为我的代码，这是一个有效的演示：

https://codepen.io/lamjaguar/pen/yOrVym

JS：

var app=angular.module('myApp', []);

app.controller('MyCtrl', ['$scope', '$filter', function ($scope, $filter) {
    $scope.currentPage = 0;
    $scope.pageSize = 10;
    $scope.data = [];
    $scope.q = '';

    $scope.getData = function () {
      // needed for the pagination calc
      // https://docs.angularjs.org/api/ng/filter/filter
      return $filter('filter')($scope.data, $scope.q)
    }

    $scope.numberOfPages=function(){
        return Math.ceil($scope.getData().length/$scope.pageSize);                
    }

    for (var i=0; i<65; i++) {
        $scope.data.push("Item "+i);
    }
  // A watch to bring us back to the 
  // first pagination after each 
  // filtering
$scope.$watch('q', function(newValue,oldValue){             if(oldValue!=newValue){
      $scope.currentPage = 0;
  }
},true);
}]);

//We already have a limitTo filter built-in to angular,
//let's make a startFrom filter
app.filter('startFrom', function() {
    return function(input, start) {
        start = +start; //parse to int
        return input.slice(start);
    }
});

HTML：

<div ng-app="myApp" ng-controller="MyCtrl">
  <input ng-model="q" id="search" class="form-control" placeholder="Filter text">
  <select ng-model="pageSize" id="pageSize" class="form-control">
        <option value="5">5</option>
        <option value="10">10</option>
        <option value="15">15</option>
        <option value="20">20</option>
     </select>
  <ul>
    <li ng-repeat="item in data | filter:q | startFrom:currentPage*pageSize | limitTo:pageSize">
      {{item}}
    </li>
  </ul>
  <button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
        Previous
    </button> {{currentPage+1}}/{{numberOfPages()}}
  <button ng-disabled="currentPage >= getData().length/pageSize - 1" ng-click="currentPage=currentPage+1">
        Next
    </button>
</div>

AngularJS - 搜索整个分页表

1 个答案: