This angular 5 tutorial help to add smart table server-side pagination into grid listing.Smart-table very popular and customizable open-source grid plugin for angular. You can integrate a smart table with angular1.4, angular 4/6/9 or 13.
I have already shared tutorials of smart table integration with older versions like angular 1.4. You can read AngularJS Smart Table Listing with Demos and AngularJS Smart Table with Add, Edit and Delete Records.
Now Angular version has been updated and widely used angular 9+ and angular 13. This smart table example was developed on angular 13. We will create the following functionality in this tutorial,
- Fetch records from server using rest API through Angular 5 HTTP client.
- Listing data into an HTML table using ng2-smart-table.
- Adding server-side Pagination using ServerDataSource smart table service.
I am using the following files and folder
We will create and modify changes into the below angularjs files.
- package.json : This file used to add third-party libs, like we will add bootstrap 4 package information.
- .angular-cli.json : Use to add bootstrap css and js files path here.
- src/index.html : This file is used for html table container wrapper.
- src/models/app.users.ts : We will define the user’s model interface here.
- src/app/app.module.ts : We will use this file to import the module.
- src/app/app.component.ts : We will use it to define smart table components and their configuration of them.
- src/app/app.component.html: This file is used to create a smart table container.
I am assuming, You have created a sample app of angular 5 using CLI, if not please create or get help from Getting started with angular 4 tutorials.
Let’s Create a Smart table listing With Server Side pagination
smart-table is providing ServerDataSource service for server-side pagination, We will use ServerDataSource to handle chunks of data from the server.
I am using dummy 'https://reqres.in/api/users' rest api, that will return the below types json data with pagination information:
{"page":1,"per_page":3,"total":12,"total_pages":4,"data":[{"id":1,"first_name":"George","last_name":"Bluth","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg"},{"id":2,"first_name":"Janet","last_name":"Weaver","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg"},{"id":3,"first_name":"Emma","last_name":"Wong","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg"}]}
Step 1: Adding jquery and bootstrap package info into package.json file.
"bootstrap": "^v4.0.0-alpha.6", "jquery": "^3.2.1"
And added enrty into angular-cli.json file,
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
Step 2: Installing ng2-smart table package and save into package.json.npm install --save ng2-smart-table
Step 3: We all create users type interface into app.users.ts file.
export interface Users {
first_name: string;
last_name: string;
avatar: string;
}
Step 4: import the ng2-smart-table module into app.module.ts file. We will add the below code into this file.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { Ng2SmartTableModule } from 'ng2-smart-table';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
Ng2SmartTableModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Step 5: Create the app container into index.html file. We will add the below code into this file.
<div class="container" style="padding: 50px 0px;"> <div class="well"> <h3>Smart Table Pagination in Server Side Using Angular 13</h3> </div> <div class="row"> </div> </div>
Step 6: Open app.component.ts file and import ServerDataSource, users interface and HTTP into this file.
import {HttpClient} from '@angular/common/http';
import {HttpErrorResponse} from '@angular/common/http';
import { Users } from '../models/app.users';
import { ServerDataSource } from 'ng2-smart-table';
Step 7: Configure smart-table and added parameters for pagination into app.component.ts file.
export class AppComponent {
title = 'app';
data:any = [];
source: ServerDataSource;
settings = {
columns: {
id: {
title: 'ID',
filter: false,
editable: false,
addable: false
},
first_name: {
title: 'First Name',
filter: true
},
last_name: {
title: 'Last Name',
filter: true
},
avatar: {
title: 'Profile Image',
type: 'html',
valuePrepareFunction: (photo:string) => { return ``; },
filter: false
}
},
pager : {
perPage :3
},
actions: false
};
constructor(private http: HttpClient){
//this.source. = 'data';
}
}
We have created HTTP variable and assigned into angular 5 constructor method, to render an image into the smart-table col, We have used valuePrepareFunction and passed the image field name.
Step 8: Now create HTTP request to get data from server, we have passed pagination configure parameters within request, We will add below code into app.component.ts file.
ngOnInit(): void {
this.source = new ServerDataSource(this.http, { endPoint: 'https://reqres.in/api/users',
dataKey:'data',
totalKey:'total',
perPage:'per_page',
pagerPageKey:'page' });
console.log(this.source);
}
I have to override the key name from rest datasource to the smarttable datasource.
Conclusion:
We have created an HTML table listing using the ng2-smart-table plugin, You can add sorting and filtering without much code. I have created server-side pagination with smart table grid.You can do more configure smart table as per your need.
