Angular 9 Datatable with angular2-datatable [Sorting/Pagination/Rows Per Page]

Angular 4 Datatable with angular2-datatable [Sorting/Pagination/Rows Per Page]:

I was looking for a good datatable with sorting/searching/pagination like jQuery datatables.net. We have datatables.net available even for angular-2, but it has some open issues also its not the official one. So I came across a datatable angular2-datatable, it is actually good, but we don’t have inbuilt searching option.

But I personally feel, the searching is not required as enterprise applications will have more than one search field and we need to provide the search results with “and conditions” whereas datatables.net searching and all returns with “or condition” only.

 

Step 1: Installing angular2-datatable

npm i -S angular2-datatable

 

GitHub Link

 

Step 2: Import angular2-datatable in module.

import {DataTableModule} from “angular2-datatable”;

and in the @NgModule:

imports:[DataTableModule],

 

Step 3: Template Html file

• affiliateUrls is the pojo array mapped to mfData, where it has all the variables like affiliate_network_name,affiliate_shop_identity, shop_home_url and shop_home_affiliate_url.
• #mf=”mfDataTable” should be added to the table class.
  mfRowsOnPage can be given with any values. Once the table row count increases the mentioned value here, then the footer section will be enabled automatically. Here is what pagination and rows per page is displayed.
• Below example is provided with edit and delete option as well.
• Sorting can be enabled for the required columns with the mfDefaultSorter and “by” attribute. [Name should be same as the model variable].

 

[html]
<table class=”table table-striped” [mfData]=”affiliateUrls” #mf=”mfDataTable” [mfRowsOnPage]=”10″ >
<thead class=”thead-inverse”>
<tr>
<th scope=”row” style=”width:20%;”>
<mfDefaultSorter by=”affiliate_network_name”>Affiliate Network</mfDefaultSorter>
</th>
<th scope=”row” style=”width:20%;”>
<mfDefaultSorter by=”affiliate_shop_identity”>Store Identity</mfDefaultSorter>
</th>
<th scope=”row” style=”width:20%;”>
<mfDefaultSorter by=”shop_home_url”>Shop Home URL</mfDefaultSorter>
</th>
<th scope=”row” style=”width:20%;”>
<mfDefaultSorter by=”shop_home_affiliate_url”>Shop Home Affiliate Name</mfDefaultSorter>
</th>
<th scope=”row” style=”width:10%;”>
<mfDefaultSorter>Edit</mfDefaultSorter>
</th>
<th scope=”row” style=”width:10%;”>
<mfDefaultSorter>Delete</mfDefaultSorter>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor=”let affiliateUrl of mf.data”>
<td>{{affiliateUrl.affiliate_network_name}}</td>
<td>{{affiliateUrl.affiliate_shop_identity | uppercase}}</td>
<td >{{affiliateUrl.shop_home_url}}</td>
<td>{{affiliateUrl.shop_home_affiliate_url}}</td>
<td>
<button class=”btn” title=”edit” >
<a [routerLink]=”[‘/affiliate-urls/add-affiliate-urls’,affiliateUrl.affiliate_url_id]”>
<i class=”fa fa-edit”></i>
</a> </button>
</td>
<td>
<button class=”btn” title=”remove” (click)=”deleteConfirm(affiliateUrl.affiliate_shop_identity,affiliateUrl.affiliate_url_id)”>
<i class=”fa fa-trash-o”></i>
</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan=”6″>
<mfBootstrapPaginator [rowsOnPageSet]=”[10,50,100,500,1000]”></mfBootstrapPaginator>
</td>
</tr>
</tfoot>
</table>

[/html]

Till Step 3 is enough to use angular2-datatable, below is just for reference.

 

Step 4: Component Typescript File

[html]
export class AffiliateUrlsComponent {
affiliateUrls:AffiliateUrl[];
}
[/html]

 

Fetching:

[html]
this.userService.getUserByName(localStorage.getItem(“currentUserName”)).subscribe(
user => {
// logic to take the all the values
this.affiliateUrlService.getAllAffiliateUrls().subscribe(
affiliateUrls => {
this.affiliateUrls = JSON.parse(JSON.parse(JSON.stringify(affiliateUrls))._body);
}, error => console.log(error));
},
error => console.log(error));
}
[/html]

 

Delete:

[html]

deleteConfirm(name:string,affiliateUrlId:number){
if(confirm(“Are you sure to delete “+name)) {
this.userService.getUserByName(localStorage.getItem(“currentUserName”)).subscribe(
user => {
this.affiliateUrlService.deleteById(affiliateUrlId).subscribe(
affiliateUrl => {
// if deletion is success
console.log(“Deletion success!”+affiliateUrlId);
},
error => console.log(error));
},
error => console.log(error));
}
}
[/html]

 

AffiliateUrl Model:

[html]
public affiliate_network_name:string;
public affiliate_shop_identity:string;
public shop_home_url:string;
public shop_home_affiliate_url:string;
public user:User;
[/html]

 

 

Below screenshot is reference: