Control over pagination template in UI-Grid

[AdamDiament]

Hello - thanks for UI grid, a great addition to angular!

Feature request -

a) Control over the appearance and behaviour of the pagination template through an instantiation option in grid options

e.g a few issues / requests here

1. I would like to be able to move the pagination panel to at the top of the grid

2. Once the data has been paged at least once, i.e user moves to second page, the pagination template overlaps the bottom of the grid, and the width of the select box for pageSizes is not wide enough to incorporate larger amounts - see http://gyazo.com/8431730d9b2ac2dcb7580ca0b542aad8 I've managed to "fix" issue 2) by overriding some of the css but it's not ideal

   .ui-grid-pager-panel {
    position:relative;
    display: inline-block;
   }
   .ui-grid-pager-max-pages-number {
    vertical-align: top;
   }
   .ui-grid-pager-row-count-picker select {
    width: auto !important;
   }

3. Increased control over options in paginationPageSizes: Desired behaviour is control over styling and also allowing an "all" option in paginationPageSizes: e.g instead of [100, 500, 1000, 5000], to be able to use something like

   paginationPageSizes: [
    {amount: 100, label: "100"},
    {amount: 500, label: "500"},
    {amount: $scope.gridOptions.totalItems, label: "All"}]

[firecentaur]

Have you made any progress on this Adam?

[firecentaur]

I was able to create pagination at the top by utilizing the ui-grid api: `

<div>

        <button ng-disabled="videoListPaginationOptions.pageNumber === 1"
                ng-click="videoListGridApi.pagination.seek(1)"

                role="menuitem" type="button" title="Page to first" aria-label="Page to first"
        >
            <i class="fa fa-step-backward "></i>
        </button>
        <button
                ng-disabled="videoListPaginationOptions.pageNumber === 1"

                ng-click="videoListGridApi.pagination.previousPage()"

                role="menuitem" type="button" title="Previous Page" aria-label="Previous Page">
            <i class="fa fa-play fa-rotate-180 "></i>
        </button>
        <input ng-model="videoListPaginationOptions.pageNumber"
               ng-change="seekPage('videoList',videoListPaginationOptions.pageNumber)"
                class="ui-grid-pager-control-input" type="text" width="50px"/>&nbsp;/ {{ videoListGridApi.pagination.getTotalPages() }}
        <button role="menuitem" type="button" title="Next Page" aria-label="Next Page"
                ng-click="videoListGridApi.pagination.nextPage()"
        >
            <i class="fa fa-play "></i>
        </button>
        <button
                ng-disabled="videoListGridApi.pagination.pageNumber === videoListGridApi.pagination.getTotalPages()"
                ng-click="videoListGridApi.pagination.seek(videoListGridApi.pagination.getTotalPages())"
                role="menuitem" type="button" title="Page to last" aria-label="Page to last">
            <i class="fa fa-step-forward "></i>
        </button>

    </div>

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically closed because it has not had recent activity. If you believe that this is still an issue in the latest version, feel free to re-open it. Thank you for your contributions.

[mportuga]

Note: Add good first issue label