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?

Goldstone

Answer 1

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

Mcintyre

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? – Goldstone

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. – Mcintyre

I tried this, looked clean, but it didn't work for me, I ended up with: .ng-table-pager { display: none; } – Vocoid

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:[]}); – Tithe

This is giving performance issue and slowing down the loading of page as it is loading the entire data in a single page – Threegaited

Answer 2

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

Juarez

Answer 3

You could hide it with css:

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

Donegal

Answer 4

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.

. . .

Plutonic

While it indeed hides the template, it also generates a call to the server, resulting in a 404 (if there no page returned). – Pyrexia

Answer 5

$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.

Premeditate

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 – Decorticate

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. – Protoxylem

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. ^_^ – Premeditate

Answer 6

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

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

Valence

Answer 7

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

gridParams.total(0);

Janey

Answer 8

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

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

Lodestar