如何在服务器端分页中使用 Angular UI-Grid [英] How to use Angular UI-Grid with Server Side Paging

问题描述

我正在使用 AngularJs Ui-Grid.info 来显示动态数据网格，我喜欢它，但现在我必须钩住它使用服务器端过滤和分页最多包含 60,000 条记录的数据库表，并且该插件的分页选项似乎仅适用于客户端分页.

有没有人能够使用服务器端分页来实现这一点.你有代码示例吗.

查看代码

<div id="grid1" ui-grid="gridOptions" class="grid" ui-grid-auto-resize ui-grid-pagination></div>

控制器的一部分

$scope.gridOptions = {启用过滤:真，enableColumnResize: 真，paginationPageSizes: [25, 50, 75],分页页面大小:25，列定义:[{//field: 'Id', width: 60, displayName: 'Id', enableFiltering: false字段:'id'，宽度:60，显示名称:'Id'，启用过滤:false},{字段:'skill_count'，},{字段:'名称'}]};$scope.loadData = 函数 () {SkillService.getUnprovisioned(功能(数据){$scope.gridOptions.data = 数据；});};

解决方案

API 中有一个服务器端分页选项.

<块引用>

http://ui-grid.info/docs/#!/api/ui.grid.pagination.api:GridOptions ->使用外部分页

这是服务器端分页和排序的示例:

http://plnkr.co/edit/UttxPkXG8fYQDX85fnyZ?p=preview

在上面的例子中，参考下面给出的服务器端分页的代码块:

gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {paginationOptions.pageNumber = newPage;paginationOptions.pageSize = pageSize;获取页面()；});

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.

Has anyone been able to get this working with Server Side Paging. Do you have a code example.

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;
    });
};

解决方案

There is a server-side pagination option available in the API.

http://ui-grid.info/docs/#!/api/ui.grid.pagination.api:GridOptions -> useExternalPagination

Here is an example of server-side pagination and sorting:

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();
});

这篇关于如何在服务器端分页中使用 Angular UI-Grid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！