29

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 8

58

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
});
5
  • 3
    Interesting. 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
  • 1
    I tried this, looked clean, but it didn't work for me, I ended up with: .ng-table-pager { display: none; }
    – orlybg
    Commented 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 your counts: [] in the baseSettings and not the other. Like so: new ngTableParams({baseParameters}, {counts:[]});
    – user256430
    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
    – smali
    Commented Mar 30, 2016 at 10:36
13

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);
        }
    });
4

You could hide it with css:

.ng-table-pager {
    display: none;
}
2

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.

. . .
1
  • 1
    While it indeed hides the template, it also generates a call to the server, resulting in a 404 (if there no page returned).
    – OnoSendai
    Commented Mar 27, 2015 at 17:33
2
$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.

3
  • 1
    This 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
    – csharpsql
    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. ^_^
    – baitang
    Commented Aug 19, 2018 at 7:09
1

For completeness, CSS to only hide the pagination immediately following the table:

table.ng-table + div[ng-table-pagination]{
    display: none;
}
0

This worked for me. I called NgTableParams of gridParams and after load data I put

gridParams.total(0);
0

This worked for me, very basic using style="display:none".

<mat-paginator style="display:none" [length]="recordCount" [pageSize]="pageSize"></mat-paginator>   

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.