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

我使用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);

var-app=angular.module（'peradmin'，['ngRoute'，'ngAnimate'）；
var baseUrl=http://localhost/peradmin/';
var currentUrl=window.location.pathname.split（'/'）；
app.filter（'startFrom'，function（）{
返回功能（输入、启动）{
如果（输入）{
开始=+开始；
返回input.slice（开始）；
}
返回[]；
}
});
app.controller（'CustomerController'，函数（$scope，$http，filterFilter）{
$scope.customer=[]；
$scope.filtered=[]；
$scope.pageSize=10；
$scope.currentPage=0；
$scope.getCustomerData=函数（当前页）{
$http({
方法：“POST”，
url:baseUrl+'customer/getcustomer'，
数据：{limit:$scope.pageSize，偏移量：currentPage}，
标题：{'Content-Type'：'application/json'}
}).然后（功能（响应）{
$scope.customer=response.data.customer；
$scope.totalData=response.data.total；
$scope.pageNumber=Math.ceil（$scope.totalData/$scope.pageSize）；
})
}
$scope.filterData=函数（）{
$scope.currentPage=0；
$scope.pageNumber=Math.ceil（$scope.filtered.length/$scope.pageSize）；
};
$scope.$watchCollection（'customer'，function（）{
if（$scope.results==未定义）返回；
$scope.currentPage=0；
$scope.pageNumber=Math.ceil（$scope.totalData/$scope.pageSize）；
})
//下一步和上一步按钮
$scope.paging=函数（类型）{
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）；
}
//返回第一页
$scope.firstPage=函数（）{
$scope.currentPage=0；
$scope.getCustomerData（$scope.pageSize*$scope.currentPage）；
}
//转到最后一页
$scope.lastPage=函数（）{
$scope.currentPage=$scope.pageNumber-1；
$scope.getCustomerData（$scope.pageSize*$scope.currentPage+1）；
}
//加载页面时调用数据
$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>

第{{currentPage+1}}页自{pageNumber}}|总计：{{totalData}}数据



电子邮件
名称
类型
{{val.EMAIL}
{{val.NAME}}
{{val.CUST_TYPE==“B”？“业务”：“个人”}






找不到数据

如何使其过滤到数据库上的整个数据

谢谢

我想应该是：

$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()">

我尝试了此操作，但出现了此错误

ReferenceError:未在b.$scope.getCustomerData（CustomerController.js:17）中定义筛选器

抱歉，是的，请使用$scope进行尝试，像

$scope.filter.NAME

仍然错误

TypeError:无法读取b.$scope.getCustomerData的未定义属性“NAME”

我已经更新了上面的javascript代码，也许你可以找到原因…因为你需要声明$scope.filter。尝试以下操作：

$scope.filter={NAME:，EMAIL:}

。将其放在

$scope.currentPage=0之后声明。很抱歉反应太晚，我已经仔细地尝试了你的代码，现在它正在工作……谢谢你，伙计，你是我的救星：你应该用谷歌搜索如何用你的服务器或数据库的语言实现分页，而不是角度。后端不应该关心什么是UI技术。我使用Codeigniter运行AngularJS，因为我是AngularJS的新手，所以它不完全是Javascript。