Как использовать Angular UI-Grid с страничным пейджингом на сервере
Я использую AngularJs Ui-Grid.info для отображения динамических сеток данных, мне это нравится, но теперь я должен подключить его к таблице базы данных с 60 000 записей, используя серверная фильтрация и пейджинг, и кажется, что параметры разбивки на страницы для этого плагина предназначены только для страничной страницы на стороне клиента.
Кто-нибудь мог получить это, работая с страничной страницей сервера. У вас есть пример кода.
Просмотр кода
<div class="gridContainer">
<div id="grid1" ui-grid="gridOptions" class="grid" ui-grid-auto-resize ui-grid-pagination></div>
</div>
Часть контроллера
$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;
});
};
Ответы
Ответ 1
В API имеется опция разбиения на страницы на стороне сервера.
http://ui-grid.info/docs/#!/api/ui.grid.pagination.api:GridOptions → useExternalPagination
Вот пример разбиения на страницы и сортировки на стороне сервера:
http://plnkr.co/edit/UttxPkXG8fYQDX85fnyZ?p=preview
В вышеприведенном примере обратитесь к приведенному ниже блоку кода, который выполняет разбиение на страницы на стороне сервера:
gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
paginationOptions.pageNumber = newPage;
paginationOptions.pageSize = pageSize;
getPage();
});
Ответ 2
Легко создать собственную сетку, используя uib-pagination и ng-repeat.
В приведенной ниже ссылке приведен пример. Надеюсь, это поможет.
Angular Паганирование WebAPI