Paging is gone when i enable vertical scrolling

[mitosandov]

Hi i am using the latest version. I have a table with 20 columns and i need vertical scrolling. This is my mark up: <datatable class="datatable material striped" [rows]="rows" [columns]="columns" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50" [rowHeight]="50" [limit]="10" [scrollbarV]="true">

                 </datatable>

When i enable the vertical scrollbar my paging is gone and all the data is shown on the client like i have not set limit to 10. Any help with this?

[amcdnl]

Can you please make a demo?

[mitosandov]

this is my datasource: data: Object[] = [ { 'selectAll': '', "merchantName": "Consuelo Dickson", "type": "female", "startDate": "01.01.1111", "endDate": "01.01.1111", "numberOfOffers": "33", "rv30": "30", "rv60": "60", "rv90": "90", "numberOfEmployees": "24", "status": "true", "action": "none" },{ "merchantName": "Consuelo Dickson", "type": "female", "startDate": "01.01.1111", "endDate": "01.01.1111", "numberOfOffers": "33", "rv30": "30", "rv60": "60", "rv90": "90", "numberOfEmployees": "24", "status": "true", "action": "none" },{ "merchantName": "Consuelo Dickson", "type": "female", "startDate": "01.01.1111", "endDate": "01.01.1111", "numberOfOffers": "33", "rv30": "30", "rv60": "60", "rv90": "90", "numberOfEmployees": "24", "status": "true", "action": "none" },{ "merchantName": "Consuelo Dickson", "type": "female", "startDate": "01.01.1111", "endDate": "01.01.1111", "numberOfOffers": "33", "rv30": "30", "rv60": "60", "rv90": "90", "numberOfEmployees": "24", "status": "true", "action": "none" },{ "merchantName": "Consuelo Dickson", "type": "female", "startDate": "01.01.1111", "endDate": "01.01.1111", "numberOfOffers": "33", "rv30": "30", "rv60": "60", "rv90": "90", "numberOfEmployees": "24", "status": "true", "action": "none" },{ "merchantName": "Consuelo Dickson", "type": "female", "startDate": "01.01.1111", "endDate": "01.01.1111", "numberOfOffers": "33", "rv30": "30", "rv60": "60", "rv90": "90", "numberOfEmployees": "24", "status": "true", "action": "none" },{ "merchantName": "Consuelo Dickson", "type": "female", "startDate": "01.01.1111", "endDate": "01.01.1111", "numberOfOffers": "33", "rv30": "30", "rv60": "60", "rv90": "90", "numberOfEmployees": "24", "status": "true", "action": "none" },{ "merchantName": "Consuelo Dickson", "type": "female", "startDate": "01.01.1111", "endDate": "01.01.1111", "numberOfOffers": "33", "rv30": "30", "rv60": "60", "rv90": "90", "numberOfEmployees": "24", "status": "true", "action": "none" },{ "merchantName": "Consuelo Dickson", "type": "female", "startDate": "01.01.1111", "endDate": "01.01.1111", "numberOfOffers": "33", "rv30": "30", "rv60": "60", "rv90": "90", "numberOfEmployees": "24", "status": "true", "action": "none" },{ "merchantName": "Consuelo Dickson", "type": "female", "startDate": "01.01.1111", "endDate": "01.01.1111", "numberOfOffers": "33", "rv30": "30", "rv60": "60", "rv90": "90", "numberOfEmployees": "24", "status": "true", "action": "none" },{ "merchantName": "Consuelo Dickson", "type": "female", "startDate": "01.01.1111", "endDate": "01.01.1111", "numberOfOffers": "33", "rv30": "30", "rv60": "60", "rv90": "90", "numberOfEmployees": "24", "status": "true", "action": "none" },{ "merchantName": "Consuelo Dickson", "type": "female", "startDate": "01.01.1111", "endDate": "01.01.1111", "numberOfOffers": "33", "rv30": "30", "rv60": "60", "rv90": "90", "numberOfEmployees": "24", "status": "true", "action": "none" },{ "merchantName": "Consuelo Dickson", "type": "female", "startDate": "01.01.1111", "endDate": "01.01.1111", "numberOfOffers": "33", "rv30": "30", "rv60": "60", "rv90": "90", "numberOfEmployees": "24", "status": "true", "action": "none" },{ "merchantName": "Consuelo Dickson", "type": "female", "startDate": "01.01.1111", "endDate": "01.01.1111", "numberOfOffers": "33", "rv30": "30", "rv60": "60", "rv90": "90", "numberOfEmployees": "24", "status": "true", "action": "none" },{ "merchantName": "Consuelo Dickson", "type": "female", "startDate": "01.01.1111", "endDate": "01.01.1111", "numberOfOffers": "33", "rv30": "30", "rv60": "60", "rv90": "90", "numberOfEmployees": "24", "status": "true", "action": "none" },{ "merchantName": "Consuelo Dickson", "type": "female", "startDate": "01.01.1111", "endDate": "01.01.1111", "numberOfOffers": "33", "rv30": "30", "rv60": "60", "rv90": "90", "numberOfEmployees": "24", "status": "true", "action": "none" },{ "merchantName": "Consuelo Dickson", "type": "female", "startDate": "01.01.1111", "endDate": "01.01.1111", "numberOfOffers": "33", "rv30": "30", "rv60": "60", "rv90": "90", "numberOfEmployees": "24", "status": "true", "action": "none" },{ "merchantName": "Consuelo Dickson", "type": "female", "startDate": "01.01.1111", "endDate": "01.01.1111", "numberOfOffers": "33", "rv30": "30", "rv60": "60", "rv90": "90", "numberOfEmployees": "24", "status": "true", "action": "none" } ]; rows = []; columns: Object[] = [{name:'Merchant Name'},{name:'Type'},{name:'Start Date'},{name:'End Date'},{name:'Number of Offers'}, {name:'RV30'},{name:'RV60'},{name:'RV90'},{name:'Number of Employees'},{name:'Status'},{name:'Action'}]

    constructor() {
        this.rows = this.data;

    }

and this is my html:

<datatable class="datatable material striped" [rows]="rows" [columns]="columns" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50" [rowHeight]="50" [scrollbarV]="true" [limit]="10"

[amcdnl]

A plunkr please.

[finalxcode]

@amcdnl https://plnkr.co/edit/3rmFP5ipjPutouL2cWpM?p=preview, just modify this part of this file src/app.ts, then run it.

  selector: 'my-app',
  template: `
    <div>
      <h3>basic</h3>
      <ngx-datatable
        class='material'
        [rows]='rows'
        [columnMode]="'force'"
        [headerHeight]="50"
        [footerHeight]="0"
        [externalPaging]="true"
        [rowHeight]="50"
        [scrollbarV]="true">
        <ngx-datatable-column name="name" [width]="300"></ngx-datatable-column>
      </ngx-datatable>
    </div>
  `
})``

[cryptSky]

@amcdnl looks like it is not possible now to have both pagination and vertical scrollbar on the table.

For example, I need scroll bar activated when first page has from 30 to 100 rows, then if the row number more than 100 I want to switch to the next page. How can I achieve that functionality with ngx-datatable?

Here is the plunker https://plnkr.co/edit/EWGrLfrF8iM6JtT8iVb1?p=preview

Thanks

[leolorenzoluis]

Hello,

I also experienced this issue, if I remove the [scrollbarV]="true" then the pagination respects the limit attribute, if not it just displays all the items right away.

[amcdnl]

Checkout this demo https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/virtual.ts

You define [footerHeight]="0" which turns off the pager . ;P

[leolorenzoluis]

@amcdnl I didn't define footer height to be 0 and yet I still don't get paging.

[amcdnl]

Can you make a demo then?

[KattHoward]

@amcdnl I am having a similar issue. I can't see my paging at the bottom of the screen. Here is my code:

HTML

<ngx-datatable #myTable class='material expandable' [columnMode]="'standard'" [headerHeight]="50" [footerHeight]="50" [rowHeight]="50" [scrollbarV]="false" [rows]='rows' [limit]="10" [externalPaging]="true"

component.ts public currentPageLimit = 5; public currentVisible = 5; public readonly pageLimitOptions = [ {value: 5}, {value: 10}, {value: 25}, {value: 50}, {value: 100}, ]; public readonly visibleOptions = [ {value: 1}, {value: 3}, {value: 5}, {value: 10}, ];

public onLimitChange(limit: any): void { this.changePageLimit(limit); this.myTable.limit = this.currentPageLimit; this.myTable.recalculate(); setTimeout(() => { if (this.myTable.bodyComponent.temp.length <= 0) { this.myTable.offset = Math.floor((this.myTable.rowCount - 1) / this.myTable.limit); } }); } public onVisibleChange(visible: any): void { this.currentVisible = parseInt(visible, 10); }

private changePageLimit(limit: any): void { this.currentPageLimit = parseInt(limit, 10); }

Any help would be greatly appreciated.

[danehendren]

@KattHoward if you turn your Scrollbarv to 'true' do you get the paging at the bottom?

I'm asking just because I'm attempting to turn the scrolling off BUT be able to flip the the next pages but when I set Scrollbarv to 'false' my paging disappears.

I'm attempting to do that because I have a bug that I believe may be connected to that.