Can someone post an exmple of a pagination footer template with all the buttons

[Matias-Barrios]

Hi, I need to write a custom footer for my table, but on the few examples I have seen by browsing through different forums I can see only examples with a next and previous buttons. I would like to have one with all the buttons, including the one which direct to individual pages.

Could someone help on this?

BTW - This information does not exist on the ng-table examples here : http://ng-table.com/#/demo/todo

[jbeaudoin11]

Same, i would like an example.. I'm looking to put the pagination-footer in a panel-footer (BS3) and have no idea how to do this :/

[Matias-Barrios]

Hi @jbeaudoin11 , Between the time I posted this yesterday and today I totally got it. I added some comments there so it can be used by others. Please let me know if I can help you. Its actually pretty easy.

<script type="text/ng-template" id="custom/pager">
   			
   			
               <div ng-if=pages.length class="pagination ng-table-pagination" ng-repeat="page in pages" ng-switch=page.type >
   				<!--Prev --->
   				<button ng-switch-when=prev ng-click=params.page(page.number) ng-class="(! page.active && ! page.current) ? 'btn_disabled' : 'btn_prev'"  > <i class="fa fa-long-arrow-left" aria-hidden="true"></i> </button>
   				<!--first button --->
   				<button ng-switch-when=first ng-click=params.page(page.number)  ng-class="(page.current) ? 'btn_common btn_active' : 'btn_common btn_inactive' " > <span ng-bind=page.number> </span></button>
   				<!--normal page --->
   				<button ng-switch-when=page ng-click=params.page(page.number) ng-class="(page.current) ? 'btn_common btn_active' : 'btn_common btn_inactive' " > <span ng-bind=page.number> </span></button>
   				<!--more button --->
   				<button ng-switch-when=more ng-click=params.page(page.number)  ng-class="(page.current) ? 'btn_common btn_active' : 'btn_common btn_inactive' " > ... </button>
   				<!--last button--->
   				<button ng-switch-when=last ng-click=params.page(page.number)  ng-class="(page.current) ? 'btn_common btn_active' : 'btn_common btn_inactive' " > <span ng-bind=page.number></span></button>
   				<!--Next --->
   				<button ng-switch-when=next ng-click=params.page(page.number)  ng-class="(! page.active && ! page.current) ? 'btn_disabled' : 'btn_next'" > <i class="fa fa-long-arrow-right" aria-hidden="true"></i></button>
   				
   			</div>
   			
   			<!--Remember to set ng-show to true if you want to see this --->
   			<div ng-show="false">
   				<div class="ng-cloak ng-table-pager" ng-if=params.data.length>
   					<div ng-if=params.settings().counts.length class="ng-table-counts btn-group pull-right">
   					<button ng-repeat="count in params.settings().counts" type=button ng-class="{\'active\':params.count() == count}" ng-click=params.count(count) class="btn btn-default">
   					<span ng-bind=count>
   					</span>
   					</button>
   				</div>
   			</div>
   			
   			<style>
   				.btn_common {
   					border : 1px solid black;
   					font-size :125%;
   					font-weight : bold;
   					color : white;
   					font-family: "Times New Roman", Times, serif;
   				}
   				 .btn_inactive {
   					background-color : #00b32d;
   					
   				 }
   				 .btn_active {
   					background-color : #003366;
   					
   				 }
   				 .btn_prev{
   					border : 1px solid black;
   					font-size :125%;
   					font-weight : bold;
   					color : white;
   					border-top-left-radius : 20px;
   					border-bottom-left-radius : 20px;
   					background-color : #ff8000;
   				 }
   				 .btn_next{
   					border : 1px solid black;
   					font-size :125%;
   					font-weight : bold;
   					color : white;
   					border-top-right-radius : 20px;
   					border-bottom-right-radius : 20px;
   					background-color : #ff8000;
   				 }
   				 
   				 .btn_disabled {
   					<!---> You can remove this and place other code if you want the button tot dissapear and instead just change its color or making it unclickable</!--->
   					display : none;
   					
   				 }
   				 
   				
                               </style>
</script>

[tvl83]

How do I tell ngTables to use this template?

[Matias-Barrios]

@tvl83 Check here :

https://github.com/Matias-Barrios/awesomatica/blob/master/index.html#L71

[tvl83]

@Matias-Barrios thanks! I did figure it out shortly after i asked but I am glad you replied. I am having a different issue. The pagination links do not do anything. Calls to params.page(page) dont do anything nor raise an error or anything. I even tried doing my own function for ng-click but because it's an ng-repeat, i think, it is in a different scope and wont call my custom functions. Do you know of any possible causes of this behavior? And/or do you know how to make the template use a custom function in $scope or defined in my controller.

[Matias-Barrios]

@tvl83 no problem buddy. I don't know why it would not work for you. This footer template has worked for me with no issues.

Are you sure you have data? (Not only one single page )

Are you doing some custom filtering?

Are you sure your version of ng-table is same? If you follow the link I gave you you can actually find ng-table module somewhere and you might check the version there

[tvl83]

Yes I know I have data, it's paginated from the api and there are 45000 records of which I get 10 or 25 at a time.

I do filtering, yes but at one time the pagination worked perfectly fine. I am using the getData parameter when initializing NgTableParams and I have a feeling that has something to do with it. I am console loging params.page() within that function and it always ever says 1 even when I click on the button to go to another page.

I found a template and hard coded params.page(2) (when i know that there are 2 pages of data) and it still does nothing from the custom template.

Even a custom function I define in the controller

vm.goPagePrev1 = function(page){
          console.log(`page ${page}`);
        };

        vm.goPageNext1 = function(page){
            console.log(`page ${page}`);
        };

        $scope.goPagePrev = function(page){
          console.log(`page ${page}`);
        };

        $scope.goPageNext = function(page){
            console.log(`page ${page}`);
        };

vm is an alias of this. I am working on this project for a client and the code was handed to me from the previous dev.

Neither of these versions of the functions work. Nothing gets printed to the console.

---

It seems to have something to do with the getData. Looking at the API docs http://ng-table.com/api-docs/classes/ngtableparams.html#page passing a number to params.page(number) will Changing the page number will cause isDataReloadRequired to return true

$scope.goPageNext = function(page){
            console.log(`page ${page}`);
            let curPage = vm.tableParams.page();
            let nextPage = curPage+page;

            console.log(`curPage: ${curPage}... going to nextPage: ${nextPage}`);

            vm.tableParams.page(nextPage);
        };

I put the next and previous buttons outside of the template and it fires fine. When running this I am sending 2 to page() but when i print params.page() in getData it's still 1.

I am going to, in the goPageNext, function set a different variable to the next page number and then in getData set the params.page() to that variable.

It seems like a very convoluted way to do it but that should work.

---

Just did this and it works perfect as I thought it would.

I am just very confused as to why it does not work properly.

It seems I have to roll my own, outside of the template, per page buttons. it defaults to 10 and i can click 25, then 50 and then 100 and it changes. If I try to go down to 10 again i have to click the current perpage amount I am on then click the lower amount to have it actually change. Very strange.