Can someone post an exmple of a pagination footer template with all the buttons
Matias-Barrios opened this issue · 7 comments
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
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 :/
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>
How do I tell ngTables to use this template?
@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.
@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
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.