In my small AngularJS app, I render several tables using the ngTable library. Only one could use pagination. The others will always fit on less than a page. Every rendered ngTable seems to add the "10 25 50 100" selector below the table. For most of my tables, this is wasted space and is nonfunctional. How can I remove that section and get that space back?
8 Answers
This was recently fixed (https://github.com/esvit/ng-table/issues/6) This code should do it for you (copied from same git issue):
$scope.tableParams = new ngTableParams({
count: items.length // hides pager
},{
counts: [] // hides page sizes
});
-
3Interesting. I managed to find a completely different solution. For each table that I don't want pagination, I just added 'template-pagination="nopager"' where "nopager" refers to an empty script block. This is more along the lines of presentation logic only being in the presentation. Can you compare these two solutions? Commented Mar 15, 2014 at 18:32
-
I would say my proposed one is slightly cleaner, but that's preference and style more than anything.. I would also guess that my proposed one is slightly faster, since yours will actually do all the compile/link stuff for an empty block and try to inject it. That said, it would be a negligible perf. improvement. Commented Mar 16, 2014 at 13:58
-
1I tried this, looked clean, but it didn't work for me, I ended up with: .ng-table-pager { display: none; }– orlybgCommented Sep 28, 2014 at 16:32
-
1
ngTableParams
takes two arguments: baseParameters and baseSettings, in that order. Each are JSON objects. So make sure you are putting yourcounts: []
in the baseSettings and not the other. Like so:new ngTableParams({baseParameters}, {counts:[]});
Commented Nov 25, 2014 at 20:06 -
This is giving performance issue and slowing down the loading of page as it is loading the entire data in a single page– smaliCommented Mar 30, 2016 at 10:36
Use this approach (based on this link) :
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 5 // count per page
}, {
counts: [], // hide page counts control
total: 1, // value less than count hide pagination
getData: function($defer, params) {
$defer.resolve(data);
}
});
Override your table declaration by including the attribute template-pagination="custom/pager" This allows you to add pagination around your table, or not include at all.
. . .-
1While it indeed hides the template, it also generates a call to the server, resulting in a 404 (if there no page returned). Commented Mar 27, 2015 at 17:33
$scope.tableParams = new ngTableParams({
noPager: true // hides pager
},{
...
});
after many tries, this method helps me. You can find the condition of pagination control's ng-show is "!noPager" in your dev console.
-
1This did not work for me, not sure whether this is version specific. I would prefer this way as it is a more obvious property to set. Will stick with @David M. Karr's solution for now Commented Feb 11, 2016 at 15:47
-
As of v4 (and maybe earlier versions) this does not work. pager.html has this line:
ng-if="params.data.length
for displaying the pager. Commented Aug 16, 2018 at 22:13 -
Hi, @DanMorphis . The answer was written in 2015 when the version of Angular was very old. I have not written Angular for a very long time. So the answer may not work any more. ^_^– baitangCommented Aug 19, 2018 at 7:09
For completeness, CSS to only hide the pagination immediately following the table:
table.ng-table + div[ng-table-pagination]{
display: none;
}
This worked for me. I called NgTableParams of gridParams and after load data I put
gridParams.total(0);
This worked for me, very basic using style="display:none".
<mat-paginator style="display:none" [length]="recordCount" [pageSize]="pageSize"></mat-paginator>