Loading
Angular with DataTables using  
  •           
  •        
  •         
  •   
  •   
  •   
  •   
  •         
  •                   
  •   
    •  
    1. import { AfterViewInit, Component, OnDestroy, OnInit } from '@angular/core';  
    2. import { SharedService } from '../shared.service';  
    3. import { DataTablesModule } from 'angular-datatables';  
    4. import {Subject} from 'rxjs';  
    5.   
    6.   
    7. @Component({  
    8.   selector: 'app-users',  
    9.   templateUrl: './users.component.html',  
    10.   styleUrls: ['./users.component.sass']  
    11. })  
    12. export class UsersComponent implements OnInit,OnDestroy {  
    13.   
    14.   constructor(private service:SharedService) { }  
    15.   
    16.   UsersList:any=[];  
    17.    
    18.    
    19.   dtOptions: DataTables.Settings = {};  
    20.   dtTrigger: Subject = new Subject();  
    21.   
    22.   ngOnDestroy(): void {  
    23.     this.dtTrigger.unsubscribe();  
    24.   }  
    25.   
    26.   ngOnInit(): void {  
    27.     this.getUsers();  
    28.      
    29.     this.dtOptions= {   
    30.       pagingType: 'full_numbers', pageLength:5, lengthMenu:[5,15,25], processing: true,   
    31.        data: this.UsersList,  // notice here  
    32.             columns: [    
    33.               {title: 'CustomId', data: 'id'},    
    34.               {title: 'Customer Code', data: 'customerCode'},    
    35.               {title: 'email', data: 'email'},    
    36.               {title: 'firstName', data: 'firstName'},    
    37.               {title: 'status', data: 'status'},    
    38.               {title: 'lastName', data: 'lastName'},    
    39.   
    40.               {title: 'createDate', data: 'createDate'},    
    41.   
    42.               {title: 'updateDate', data: 'updateDate'},    
    43.               
    44.             ],    
    45.             rowCallback: (row: Node, data: any[] | object, index: number) => {    
    46.               const self = this;    
    47.               
    48.               $('td', row).unbind('click');    
    49.               $('td', row).bind('click', () =>   
    50.               {    
    51.                   
    52.               });    
    53.               return row;    
    54.             }    
    55.           };    
    56.     
    57.   
    58.       
    59.   }  
    60.   
    61.   
    62.   
    63.   getUsers()  
    64.   {  
    65.     this.service.getUser().subscribe(data=>{  
    66.       this.UsersList=data;  
    67.      
    68.        
    69.     });  
    70.   }  
    71.   
    72.     
    73. }  
     
  • Sachin Singh

    Sachin SinghPosted Nov 17, 2021, 9:03 AM

    You have already done 90% of the things, now just define column names, just remember the column name should match to the json your service is returning.
    1. ngOnInit() {  
    2.     this.dtOptions= { 
    3. pagingType: 'full_numbers', pageLength:5, lengthMenu:[5,15,25], processing: true, 
    4.  data: this.UsersList,  // notice here
    5.       columns: [  
    6.         {title: 'Browser', data: 'Browser'},  // property name should be Browser in UserList
    7.        ......Other column names.......
    8.       ],  
    9.       rowCallback: (row: Node, data: any[] | object, index: number) => {  
    10.         const self = this;  
    11.         // Unbind first in order to avoid any duplicate handler  
    12.         // (see https://github.com/l-lin/angular-datatables/issues/87)  
    13.         $('td', row).unbind('click');  
    14.         $('td', row).bind('click', () => {  
    15.           self.rowWasSelected(data);  
    16.         });  
    17.         return row;  
    18.       }  
    19.     };  
    20.   }