Problems with pagination.

[ShiruJan]

Hello,

I have the next problem with the table, the pagination not works, do i need some configuration?

My code:

<data-table id="my-table" [items]="v_report_result" [itemCount]="v_report_result_count" [pagination]="true" [pageLimits]="[15, 30, 45]" [noDataMessage]="'No data'" > <data-table-column [property]="'fullname'" [header]="'Name'" [sortable]="true"> <data-table-column [property]="'email'" [header]="'E-mail'"> <data-table-column [property]="'phonehome'" [header]="'Phone home'"> <data-table-column [property]="'phonemobile'" [header]="'Phone mobile'">

Thank you.

[brunano21]

Hi, What do you mean it does not work? Do you get any errors?

[ShiruJan]

Hello brunano21, thanks for the answer.

The problem I have is, currently the grid shows 45 records, but the grid is set to 15 records per page. Why do you show me all the records and not 15 records per page?

I was checking and I do not mark any error.

Do I need some configuration?

I hope to have explained. Thank you very much!

[brunano21]

Uhm, that's weird. Can you share part of your code, please?

[Divyeshkhatri]

Hi i am facing same issue pagination and sorting not working. Table is showing all records

Datatable Code 👎

<data-table id="my-table" [title]="'Queue'" [items]="allQueues" [itemCount]="allQueues.length" [showReloading]="false" [pagination]="true" [sortBy]="'keyword_id'" [sortAsc]="false" [noDataMessage]="'Record was not found'"> <data-table-column [property]="'website_id'" [header]="'Website'" [sortable]="true"> <ng-template #dataTableCell let-item="item"> {{item.website_id.name}} <data-table-column [property]="'keyword_id'" [header]="'Keyword'" [sortable]="true"> <ng-template #dataTableCell let-item="item"> {{item.keyword_id.name}}

[jeanDenison]

I had the same issue and I fixed it by passing the limit in the query params while initialising the table

private initializeTable(contacts: ContactModel[]) { this.tableResource = new DataTableResource(contacts); this.tableResource .query({offset: 0, limit: 10}) .then(items => this.items = items); this.tableResource.count() .then(count => this.itemCount = count); }

[brunano21]

@ShiruJan and @Divyeshkhatri Can you share your code please? Where do you initialize the table?

[Divyeshkhatri]

import {BrowserModule} from '@angular/platform-browser'; import {NgModule} from '@angular/core'; import {AppComponent} from './app.component'; import {Route, RouterModule} from '@angular/router'; import {HttpClient, HttpClientModule} from '@angular/common/http'; import {Ng4LoadingSpinnerModule} from 'ng4-loading-spinner'; import {ToastModule} from 'ng2-toastr/ng2-toastr'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; import {FormsModule} from '@angular/forms'; import { DataTableModule } from 'angular5-data-table';

import {DashboardComponent} from './components/dashboard/dashboard.component'; import {KeywordsComponent} from './components/keywords/keywords.component';

import {ApiServiceService} from './services/api-service.service'; import {KeywordsService} from './modellist/keywords.service'; import {CommonService} from './services/common.service'; import {CommonmodelService} from "./modellist/commonmodel.service"; import { QueueComponent } from './components/queue/queue.component'; import {QueueService} from './modellist/queue.service'; import { ScrapingComponent } from './components/scraping/scraping.component'; import {ScrapingService} from "./modellist/scraping.service";

const ROUTES: Route[] = [ {path: '', redirectTo: 'dashboard', pathMatch: 'full'}, {path: 'dashboard', component: DashboardComponent}, {path: 'keywords', component: KeywordsComponent}, {path: 'queue', component: QueueComponent}, {path: 'log', component: ScrapingComponent}, ];

@NgModule({ declarations: [ AppComponent, DashboardComponent, KeywordsComponent, QueueComponent, ScrapingComponent ], imports: [ BrowserModule, RouterModule.forRoot(ROUTES, {useHash: true}), FormsModule, Ng4LoadingSpinnerModule.forRoot(), ToastModule.forRoot(), DataTableModule.forRoot(), BrowserAnimationsModule, HttpClientModule ], providers: [ HttpClient, CommonService, ApiServiceService, KeywordsService, QueueService, ScrapingService, CommonmodelService ], bootstrap: [AppComponent] }) export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

[SekinaB]

Hi ! I had the same issue with my code, the pagination is not working. I believe it was because I didn't use the class you created DataTableResource. (So I didn't use the function query) :

file.ts :

reload(params) { 
    this.media.list(this.uri).subscribe(res => {
        this.folderItems = res['items'];
    });
}

file.html :

<data-table id="items-grid" [items]="folderItems | dataFilter : filterQuery" [itemCount]="folderItems.length" (reload)="refresh($event)" (rowClick)="onClickItem($event)">
        <data-table-column [property]="'type'" [header]="'Type'" [sortable]="true" [width]="85">
            <ng-template #dataTableCell let-item="item">
                <span style="color: grey">
                    <i class="fa fa-file" *ngIf="item.type == 'f'"></i>
                    <i class="fa fa-folder" *ngIf="item.type == 'd'"></i>
                </span>
            </ng-template>
        </data-table-column>
        <data-table-column [property]="'name'" [header]="'Name'" [sortable]="true" [resizable]="true"></data-table-column>
        <data-table-column [property]="'mtime'" [header]="'Modified'" [sortable]="true" [resizable]="true">
            <ng-template #dataTableCell let-item="item">{{ item.mtime | date:'longTime' }}</ng-template>
        </data-table-column>
        <data-table-column [property]="'size'" [header]="'Size'" [sortable]="true" [resizable]="true" [width]="150">
            <ng-template #dataTableCell let-item="item">{{ item.size | fileSize:2 }}</ng-template>
        </data-table-column>
        <data-table-column [header]="'Action'" [width]="100">
            <ng-template #dataTableCell let-item="item">
                <app-delete-item [path]="uri" [item]="item"></app-delete-item>
                <button class="btn btn-sm btn-primary" (click)="downloadItem(item)" *ngIf="item.type == 'f'">
                    <i class="fa fa-cloud-download" aria-hidden="true"></i>
                </button>
            </ng-template>
        </data-table-column>
</data-table>

But now I have another issue ... I tried to reimplement the query function (only with the bits I needed) and this is what I have :

I can only have 10 values of the 28 present in the database. Do you have any clue of how to handle this

new_file.ts

    test(params): Promise<FmItem[]> {
        let result: FmItem[];
        if (params.offset !== undefined) {
            if (params.limit === undefined) {
                result = this.folderItems.slice(params.offset, this.folderItems.length);
            } else {
                result = this.folderItems.slice(params.offset, params.offset + params.limit);
            }
        }
        return new Promise((resolve, reject) => {
            setTimeout(() => resolve(result));
        });
    }

    reload(params) {
        this.getDirectory(this.uri);
        this.media.list(this.uri).subscribe(res => {
            this.folderItems = res['items'];
        });
        this.test(params).then(items => this.folderItems = items);
    }

[brunano21]

@SekinaB where do you set table.itemCount? Bear in mind that not all the times itemCount === items.length because itemCount is the total items you have i.e. into your database, while items is the set of rows returned by your query.

[SekinaB]

Thank you for your help, I did forget to change the code for the initialisation of itemCount and it was my problem.... Thanks again !

[ferprez]

@brunano21 it's possible to customize the pagination layout? overriding with an ng-template ?

[brunano21]

@ferprez, unfortunately, it's not possibile at the moment...but that's a nice feature to have...I may work on that, but PRs are always welcome :-)

[stephenmutua254]

Hey. I just installed and created a table using this library but the pagination is not working well. Also the sorting does not work. Please help

[stephenmutua254]

Sample code of the html template <data-table [items]="items" [itemCount]="itemCount" (reload)="reloadItems($event)" [pagination]="true" [pageLimits]="[5, 30, 45]">

<data-table-column [property]="'title'" [header]="'Title'" [sortable]="true" [resizable]="true">

Here ie the result I get.

[brunano21]

@stephenmutua254 I think you are missing font-awesome for icons. Please, follow the installation step described into the README.md file.

[stephenmutua254]

I don't think if its the icons that are causing it not to work. But let me install and see if it will.

[stephenmutua254]

I have installed font awesome but nothing has changed. Sorting does not work when I click the column headers. Pagination as you can see on the picture above its not working either. It shows all the records in one page instead of the specified limit of 5. And when I click on the next page it shows same previous records.

[stephenmutua254]

When I hover the mouse on the column headers it says 'activate to sort descending'. I have enabled sorting on the code so I don't know what that means.

[brunano21]

@stephenmutua254 can you show me where you set items and itemsCount?

Also, you did set [sortable]=true hence you have enabled sorting for that specific column.

[stephenmutua254]

[brunano21]

I think you are missing how the table works. I don't understand why you are using initializeTable function, as I believe you don't need it.

You should do something like:

this.productService.getAll().subscribe( (products, count) => {
   this.items = products;
   this.itemCount = count;
});

getAll() may return an object containing all the products plus the length of the products set.

Of course, this makes if you have server-side pagination.

[stephenmutua254]

I used the initializeTable function outside the constructor so that I can use it when performing other operations such as filtering. I have tried your suggestion above but it gives me an error.

[stephenmutua254]

[brunano21]

@stephenmutua254 are you still experiencing the reported issue? or did you find out the solution?

[brunano21]

Closing for inactivity. Feel free to reopen it if still struggling.