如何在AngularJS中實現服務器端過濾和分頁

Question

我正在使用AngularJS從數據庫顯示數據，我已經實現了客戶端分頁和過濾，但是當它加載大量數據時，我的App崩潰了。

因此，我想通過將數據限制為10個項目/頁來將其更改為服務器端分頁，但是，當我過濾數據時，它僅搜索頁面上顯示的項目。 到目前為止，這是我的代碼

var app = angular.module('peradmin', ['ngRoute', 'ngAnimate']);
var baseUrl = 'http://localhost/peradmin/';
var currentUrl = window.location.pathname.split('/');

app.filter('startFrom', function() {
  return function(input, start) {
    if (input) {
        start = +start;
        return input.slice(start);
    }
    return [];
  }
});

app.controller('CustomerController', function($scope, $http, filterFilter) {
$scope.customer = [];
$scope.filtered = [];

$scope.pageSize = 10;
$scope.currentPage = 0;

$scope.getCustomerData = function(currentPage) {
    $http({
        method: 'POST',
        url: baseUrl + 'customer/getcustomer',
        data: { limit: $scope.pageSize, offset: currentPage },
        headers: { 'Content-Type': 'application/json' }
    }).then(function(response) {
        $scope.customer = response.data.customer;
        $scope.totalData = response.data.total;
        $scope.pageNumber = Math.ceil($scope.totalData / $scope.pageSize);
    })
}

$scope.filterData = function() {
    $scope.currentPage = 0;
    $scope.pageNumber = Math.ceil($scope.filtered.length / $scope.pageSize);
};

$scope.$watchCollection('customer', function() {
    if ($scope.results == undefined) return;
    $scope.currentPage = 0;
    $scope.pageNumber = Math.ceil($scope.totalData / $scope.pageSize);
})

// Next & Previous Button
$scope.paging = function(type) {
    if (type == 0 && $scope.currentPage > 0) {
        --$scope.currentPage;
    } else if (type == 1 && $scope.currentPage < $scope.pageNumber - 1) {
        ++$scope.currentPage;
    }
    $scope.getCustomerData($scope.pageSize * $scope.currentPage);
}

// Back to First Page
$scope.firstPage = function() {
    $scope.currentPage = 0;
    $scope.getCustomerData($scope.pageSize * $scope.currentPage);
}

// Go to Last Page
$scope.lastPage = function() {
    $scope.currentPage = $scope.pageNumber - 1;
    $scope.getCustomerData($scope.pageSize * $scope.currentPage + 1);
}

// call data when page is loaded
$scope.getCustomerData($scope.currentPage);

}）;

這是我的觀點：

<div class="well" id="formsearch">
    <form id="search-form" class="form-inline float-lg-right" action="" method="POST">
        <input type="text" class="form-control" placeholder="Name" name="name" id="name" ng-model="filter.NAME" ng-change="filterData()">
        <input type="text" class="form-control" placeholder="Email" name="email" id="email"  ng-model="filter.EMAIL" ng-change="filterData()">
    </form>
</div>
<div class="box">
    <div class="box-body table-responsive" ng-controller="CustomerController">  
       <label>Page {{ currentPage + 1 }} from {{ pageNumber }} | Total: {{ totalData }} Data</label>
        <br><br>
        <table class="table table-hover table-bordered table-striped" width="100%">
            <thead>
                <tr>
                    <th style="text-align:center;width:20%;">Email</th>
                    <th style="text-align:center;width:25%;">Name</th>
                    <th style="text-align:center;width:10%;">Type</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="val in $parent.filtered = (customer | filter:{NAMA:filter.NAME,EMAIL:filter.EMAIL})">
                    <td>{{ val.EMAIL }}</td>
                    <td>{{ val.NAME }}</td>
                    <td style="text-align:center;">{{ val.CUST_TYPE == "B" ? "Business": "Personal"}}</td>
                </tr>
            </tbody>
        </table>

        <ul class="pagination" ng-if="totalData > 0">
            <li><a href="#" ng-click="firstPage()">First Page</a></li>
            <li><a href="#" ng-click="paging(0)">Previous</a></li>
            <li><a href="#" ng-click="paging(1)">Next</a></li>
            <li><a href="#" ng-click="lastPage()">Last Pager</a></li>
        </ul>

        <div class="alert alert-danger" ng-if="totalData == 0"><center>Data Is Not Found</center></div>
    </div>
</div>

如何使它過濾數據庫中的全部數據？

謝謝

Answer 1

我認為應該是：

$http({
    method: 'POST',
    url: baseUrl + 'customer/getcustomer',
    data: { 
            limit: $scope.pageSize, 
            offset: currentPage,
            filter: {
               name: $scope.filter.NAME,
               email: $scope.filter.EMAIL
            }
          },
    headers: { 'Content-Type': 'application/json' }
})

然后在服務器端，通過這兩個過濾器屬性，您可以執行數據庫端過濾

另外，您需要按鈕在更改處理程序上應用過濾器或限制：

$scope.filterData = function() {
        $scope.currentPage = 0;
        $scope.pageNumber = Math.ceil($scope.filtered.length / $scope.pageSize);


        $scope.getCustomerData($scope.currentPage);

};

要執行節流，可以嘗試ng-model-options='{ debounce: 1000 }' ：

   <input type="text" ng-model-options='{ debounce: 1000 }' class="form-control" placeholder="Name" name="name" id="name" ng-model="filter.NAME" ng-change="filterData()">
   <input type="text" ng-model-options='{ debounce: 1000 }' class="form-control" placeholder="Email" name="email" id="email"  ng-model="filter.EMAIL" ng-change="filterData()">