Javascript 如何在angularjs中使用AngularUI引导实现服务器端分页。?
请建议使用angular js和angular ui引导实现服务器端分页的不同方法。我将根据angualr ui bootsrap pagination指令中选择的当前页面,使用ng repeat对表列表进行分页。因为我们需要避免频繁调用服务器。我们一次需要从服务器上取50个项目。我们每页显示10项。由于我们需要分页到更大的数据集,出于性能原因,我们需要保持ng repeat模型始终包含50项。DirPaginate将满足此问题的要求 请看这个演示 当使用服务器端分页时,必须以这种格式获取JSON响应 JSON响应的格式Javascript 如何在angularjs中使用AngularUI引导实现服务器端分页。?,javascript,angularjs,twitter-bootstrap,angular-ui-bootstrap,angular-ui,Javascript,Angularjs,Twitter Bootstrap,Angular Ui Bootstrap,Angular Ui,请建议使用angular js和angular ui引导实现服务器端分页的不同方法。我将根据angualr ui bootsrap pagination指令中选择的当前页面,使用ng repeat对表列表进行分页。因为我们需要避免频繁调用服务器。我们一次需要从服务器上取50个项目。我们每页显示10项。由于我们需要分页到更大的数据集,出于性能原因,我们需要保持ng repeat模型始终包含50项。DirPaginate将满足此问题的要求 请看这个演示 当使用服务器端分页时,必须以这种格式获取JSO
{
Count: 1400,
Items: [
{ // item 1... },
{ // item 2... },
{ // item 3... },
...
{ // item 25... }
]
}
您需要注意的唯一一件事是获取数据库中的项目总数,因为您需要将其传递给我们的指令
角度控制器的格式
.controller('UsersController', function($scope, $http) {
$scope.users = [];
$scope.totalUsers = 0;
$scope.usersPerPage = 25; // this should match however many results your API puts on one page
getResultsPage(1);
$scope.pagination = {
current: 1
};
$scope.pageChanged = function(newPage) {
getResultsPage(newPage);
};
function getResultsPage(pageNumber) {
// this is just an example, in reality this stuff should be in a service
$http.get('path/to/api/users?page=' + pageNumber)
.then(function(result) {
$scope.users = result.data.Items;
$scope.totalUsers = result.data.Count
});
}
})
最后,这是一个如何将其集成到html中的示例
HTML
<div ng-controller="UsersController">
<table>
<tr dir-paginate="user in users | itemsPerPage: usersPerPage" total-items="totalUsers" current-page="pagination.current">
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
</tr>
</table>
<dir-pagination-controls on-page-change="pageChanged(newPageNumber)"></dir-pagination-controls>
</div>
{{user.name}
{{user.email}
请参阅本页的“使用异步数据”部分
我使用了dir分页库。它很容易使用,重量也很轻。天气也很好 这里有一个例子 编辑:Oops刚刚注意到,Raman Sahasi在他的回答中给出了相同的建议。将保留我的,我相信端到端实现教程将对一些人有用