В раскрывающемся списке выберите опцию пагинации в 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="">&laquo; Previous</a>
            <a ng-switch-when="next" ng-click="params.page(page.number)" href="">Next &raquo;</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

Другие вопросы по тегам