I'm using AngularJs Ui-Grid.info to display dynamic data grids, I love it but now I have to hook it up to a database table with 60,000 records using server-side filtering and paging and it appears that the pagination options for this plugin is only for client side paging.
我正在使用AngularJs Ui-Grid.info来显示动态数据网格,我喜欢它但现在我必须使用服务器端过滤和分页将其连接到具有60,000条记录的数据库表,并且看起来这个分页选项插件仅用于客户端分页。
Has anyone been able to get this working with Server Side Paging. Do you have a code example.
有没有人能够使用Server Side Paging。你有一个代码示例吗?
View Code
查看代码
<div class="gridContainer">
<div id="grid1" ui-grid="gridOptions" class="grid" ui-grid-auto-resize ui-grid-pagination></div>
</div>
Part of the Controller
控制器的一部分
$scope.gridOptions = {
enableFiltering: true,
enableColumnResize: true,
paginationPageSizes: [25, 50, 75],
paginationPageSize: 25,
columnDefs: [
{
//field: 'Id', width: 60, displayName: 'Id', enableFiltering: false
field: 'id', width: 60, displayName: 'Id', enableFiltering: false
},
{
field: 'skill_count',
},
{
field: 'name'
}
]
};
$scope.loadData = function () {
skillService.getUnprovisioned(function (data) {
$scope.gridOptions.data = data;
});
};
2 个解决方案
#1
28
There is a server side pagination option available in the API.
API中提供了服务器端分页选项。
http://ui-grid.info/docs/#/api/ui.grid.pagination.api:GridOptions -> useExternalPagination
http://ui-grid.info/docs/#/api/ui.grid.pagination.api:GridOptions - > useExternalPagination
Here is a example for serverside pagination and sorting.
以下是服务器端分页和排序的示例。
http://plnkr.co/edit/UttxPkXG8fYQDX85fnyZ?p=preview
http://plnkr.co/edit/UttxPkXG8fYQDX85fnyZ?p=preview
In above example, refer to the code block given below which does the server side pagination,
在上面的示例中,请参阅下面给出的代码块,该代码块执行服务器端分页,
gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
paginationOptions.pageNumber = newPage;
paginationOptions.pageSize = pageSize;
getPage();
});
#2
-1
It is easy to build your own grid by using uib-pagination and ng-repeat. There is a completed example in the following link. Hope this would help.
使用uib-pagination和ng-repeat很容易构建自己的网格。以下链接中有一个完整的示例。希望这会有所帮助。
Angular WebAPI分页
#1
28
There is a server side pagination option available in the API.
API中提供了服务器端分页选项。
http://ui-grid.info/docs/#/api/ui.grid.pagination.api:GridOptions -> useExternalPagination
http://ui-grid.info/docs/#/api/ui.grid.pagination.api:GridOptions - > useExternalPagination
Here is a example for serverside pagination and sorting.
以下是服务器端分页和排序的示例。
http://plnkr.co/edit/UttxPkXG8fYQDX85fnyZ?p=preview
http://plnkr.co/edit/UttxPkXG8fYQDX85fnyZ?p=preview
In above example, refer to the code block given below which does the server side pagination,
在上面的示例中,请参阅下面给出的代码块,该代码块执行服务器端分页,
gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
paginationOptions.pageNumber = newPage;
paginationOptions.pageSize = pageSize;
getPage();
});
#2
-1
It is easy to build your own grid by using uib-pagination and ng-repeat. There is a completed example in the following link. Hope this would help.
使用uib-pagination和ng-repeat很容易构建自己的网格。以下链接中有一个完整的示例。希望这会有所帮助。
Angular WebAPI分页