В раскрывающемся списке выберите опцию пагинации в ng-таблице
Мне нужно создать динамическую нг-таблицу с нумерацией страниц. Но я хочу создать выпадающий список с опцией выбора "Показать 50, 100, Все" со следующими и предыдущими кнопками.
1 ответ
Решение
Вы можете легко изменить шаблон пагинации, как, например, в вашем случае вы можете комбинировать выпадающий плагин ngtable и jseppi. как здесь
шаблон нумерации страниц
<script type="text/ng-template" id="custom/pager">
<ul class="pager ng-cloak">
<li ng-repeat="page in pages"
ng-class="{'disabled': !page.active, 'previous': page.type == 'prev', 'next': page.type == 'next'}"
ng-show="page.type == 'prev' || page.type == 'next'" ng-switch="page.type">
<a ng-switch-when="prev" ng-click="params.page(page.number)" href="">« Previous</a>
<a ng-switch-when="next" ng-click="params.page(page.number)" href="">Next »</a>
</li>
<li>
<div dropdown-select="ddSelectOptions"
dropdown-model="ddSelectSelected"
dropdown-item-label="text"
dropdown-onchange="params.count(selected.value)"
>
</div>
</li>
</ul>
</script>
контроллер
...
$scope.ddSelectOptions=[{
text: '10',
value: 10
},{
text: '20',
value: 20
},{
text: '30',
value: 30
},
{
text: '100',
value: 100
},
];
$scope.ddSelectSelected={
text: '10',
value: 10
};
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
total: data.length, // length of data
getData: function($defer, params) {
$defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
...
Рабочий паник.
Обновление 08.05.2016
CDN ссылки были сломаны, поэтому здесь работает plunk
обратите внимание, что ответ был для версии 0.3.0
последняя версия с небольшими изменениями должна быть 1.0.0