Таблици с ъглова ui-решетка, страниране и превъртане от страна на клиента

Опитвам се да пренеса малък проект от jquery към angularjs. Използвах DataTables за начертаване на диагностични данни, получени от моите виртуални машини, това е пример:

Мониторна секция

DataTables улеснява пагинирането на данните, това има предимството да не улавя превъртането на мишката по време на навигация, което е най-доброто решение, когато вашите страници съдържат много таблици. Сега се опитвам да направя същото, като използвам ui-grid от angular-ui, но опциите за страниране, които присъстваха в ng-grid, вече не присъстват (или поне не можах да ги намеря).

Има ли начин да направите страниране от страна на клиента с помощта на ui-grid? И има ли начин да се избегне прихващането на превъртането на мишката, когато няма нужда да се превърта таблицата? Ако не, просто ще трябва да се върна към ng-grid.


pagination angularjs angular-ui-grid
person Slartibartfast    schedule 17.09.2014    source източник
comment
Намерихте ли решение на този проблем?   -  person Igor Malyk    schedule 29.10.2014
comment
Всъщност не, затова превключих проекта си на ng-grid за момента   -  person Slartibartfast    schedule 31.10.2014
comment
Използвах нормална пагинационна контрола от пакета за първоначално зареждане, но ми се струва малко странно.   -  person Igor Malyk    schedule 01.11.2014

Отговори (1)


arrow_upward
6
arrow_downward

Така че не мога да обясня всяка стъпка в детайли, но ето начина, по който го накарах да работи:

Добавете зависимост за страниране към вашия модул

var app = angular.module('app', ['ui.grid', 'ui.grid.pagination']);

В контролера Деактивирайте лентите за превъртане и задайте rowsPerPage:

$scope.gridOptions.enableScrollbars = false;
$scope.gridOptions.rowsPerPage = 15;

Не забравяйте да регистрирате API (също в контролера):

$scope.gridOptions.onRegisterApi = function (gridApi) {
    $scope.gridApi = gridApi;
}

Добавете ui-grid-pagination-Directive към вашата таблица

<div ui-grid="gridOptions" ui-grid-pagination class="grid" external-scopes="$scope"></div>

Сега добавете бутони във вашия HTML-Partial (използвах Fontawesome и Bootstrap, но не е нужно):

<button type="button" class="btn btn-default" ng-click="gridApi.pagination.previousPage()">
    <span class="fa fa-angle-left"></span>
</button>
<span>Page: {{ gridApi.pagination.getPage() }}</span>
<span>/ {{ gridApi.pagination.getTotalPages() }}</span>
<button type="button" class="btn btn-default" ng-click="gridApi.pagination.nextPage()">
    <span class="fa fa-angle-right"></span>
</button>

Това е!

Хей, току-що намерих друг метод в източниците:

gridApi.pagination.seek(page);

Също така исках да спомена, че използвам ui-grid v3.0.0-rc.12

person nabinca    schedule 11.11.2014
comment
Дадох тази грешка: TypeError: Cannot set property 'onRegisterApi' of undefined at new <anonymous> - person Saeed Gharedaghi; 19.07.2016