How to render an ngTable without the pagination decorations?

Question

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?

score 57 · Answer 1 · answered Mar 15 '14 at 17:05

57

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

answered Mar 15 '14 at 17:05

XeroxDucati

5,130
2
37
66

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? – David M. Karr Mar 15 '14 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. – XeroxDucati Mar 16 '14 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 Sep 28 '14 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 Nov 25 '14 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 Mar 30 '16 at 10:36

Jesús Castro · Answer 2 · 2018-01-26T22:49:26.823

12

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

edited Jan 26 '18 at 22:49

answered Aug 08 '15 at 23:22

Jesús Castro

2,061
1
22
26

score 4 · Answer 3 · edited Mar 04 '15 at 16:21

4

You could hide it with css:

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

edited Mar 04 '15 at 16:21

Ben

10,056
5
41
42

answered Mar 04 '15 at 16:03

dcool

4,039
3
16
14

score 2 · Answer 4 · answered Jan 23 '15 at 19:41

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.

. . .

answered Jan 23 '15 at 19:41

user3183451

31
3

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 Mar 27 '15 at 17:33

score 2 · Answer 5 · answered Apr 19 '15 at 12:16

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.

answered Apr 19 '15 at 12:16

baitang

29
5

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 Feb 11 '16 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. – Dan Morphis Aug 16 '18 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 Aug 19 '18 at 07:09

score 1 · Answer 6 · answered Feb 12 '19 at 18:54

1

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

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

answered Feb 12 '19 at 18:54

Moritz Ringler

9,772
9
21
34

score 0 · Answer 7 · answered Apr 05 '18 at 14:35

0

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

gridParams.total(0);

answered Apr 05 '18 at 14:35

Mateus Galasso

320
1
5
14

score 0 · Answer 8 · answered Jun 05 '19 at 07:03

0

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

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

answered Jun 05 '19 at 07:03

Pat

325
2
11

How to render an ngTable without the pagination decorations?

8 Answers8

Linked