Question

我正在使用AngularJS来显示数据库中的数据，我已经实现了客户端分页和过滤，但是当它加载大量数据时，我的应用程序就会崩溃。

所以，我想知道通过将数据限制在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()">

如何在AngularJS中实现服务器端过滤和分页

1 个答案: