Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Matias-Barrios opened this issue Nov 22, 2017 · 7 comments

Comments

@Matias-Barrios
Copy link

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
Copy link

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
Copy link
Author

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
Copy link

tvl83 commented Jan 31, 2019

How do I tell ngTables to use this template?

@Matias-Barrios
Copy link
Author

@tvl83
Copy link

tvl83 commented Feb 1, 2019

@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
Copy link
Author

@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
Copy link

tvl83 commented Feb 4, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants