Angular with DataTables using

Question

Hello, I am using admin template with angular. There are datatables in this template, I am trying to use it. But I can't use datatables features. How is this possible? import { AfterViewInit, Component, OnInit } from '@angular/core'; import { SharedService } from '../shared.service'; import { DataTablesModule } from 'angular-datatables'; import * as $ from 'jquery'; @Component({ selector: 'app-users', templateUrl: './users.component.html', styleUrls: ['./users.component.sass'] }) export class UsersComponent implements OnInit { constructor(private service:SharedService) { } UsersList:any=[]; dtOptions: DataTables.Settings = {}; ngOnInit(): void { this.dtOptions={ pagingType: 'full_numbers', pageLength:5, lengthMenu:[5,15,25], processing: true }; this.getUsers(); $('#example2').DataTable({ "paging": true, "lengthChange": false, "searching": false, "ordering": true, "info": true, "autoWidth": false, "responsive": true, }); } getUsers() { this.service.getUser().subscribe(data=>{ this.UsersList=data; }); } } Rendering engine Browser Platform(s) Engine version CSS grade Gecko Seamonkey 1.1 Win 98+ / OSX.2+ 1.8 A Webkit Safari 3.0 OSX.4+ 522.1 A Webkit Safari 2.0 OSX.4+ 419.3 A Webkit Safari 1.3 OSX.3 312.8 A Webkit Safari 1.2 OSX.3 125.5 A Webkit S60 S60 413 A Misc PSP browser PSP - C Presto Opera for Wii Wii - A Presto Opera 9.5 Win 88+ / OSX.3+ - A Presto Opera 9.2 Win 88+ / OSX.3+ - A Rendering engine Browser Platform(s) Engine version CSS grade

Satya Karki · Answer

Check this https://www.itsolutionstuff.com/post/how-to-use-jquery-datatable-in-angularexample.html

Rijwan Ansari · Answer

Try this way. this is quite simple and step by step. https://blog.logrocket.com/angular-datatables-feature-rich-tables/

Sachin Singh · Answer

remove everything from tbody, no need of for loop, datatable will be auto filled as we already set its data property in component. //replace this "let dataItem of UsersList" > {{dataItem.id}} {{dataItem.customerCode}} {{dataItem.email}} {{dataItem.firstName}} {{dataItem.status}} {{dataItem.lastName}} {{dataItem.createDate}} {{dataItem.updateDate}} //to this

Sachin Singh · Answer

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. ngOnInit() { this . dtOptions = { pagingType : 'full_numbers' , pageLength : 5 , lengthMenu : [ 5 , 15 , 25 ] , processing : true, data: this . UsersList , // notice here columns: [ {title: 'Browser' , data: 'Browser' }, // property name should be Browser in UserList ......Other column names....... ], rowCallback: (row: Node, data: any[] | object , index: number) => { const self = this ; // Unbind first in order to avoid any duplicate handler // (see https://github.com/l-lin/angular-datatables/issues/87) $( 'td' , row).unbind( 'click' ); $( 'td' , row).bind( 'click' , () => { self.rowWasSelected(data); }); return row; } }; }

Ali Ylmaz · Answer

Hi, I did it this way but it still didn't work. Can you see what I am doing wrong by looking at my code? class = "content-wrapper" style= "min-height: 1299.69px;" > class = "content" > class = "container-fluid" > class = "card" style= "margin-top: 100px;" > class = "card-header" > class = "card-title" >DataTable with minimal features & hover style class = "card-body" > "example2_wrapper" class = "dataTables_wrapper dt-bootstrap4" > class = "row" > "example2" class = "table table-stripped dataTable table-bordered" datatable [dtOptions]= "dtOptions" > "row" > class = "sorting sorting_asc" tabindex= "0" aria-controls= "example2" rowspan= "1" colspan= "1" aria-label= "Rendering engine: activate to sort column descending" aria-sort= "ascending" >CustomId class = "sorting" tabindex= "0" aria-controls= "example2" rowspan= "1" colspan= "1" aria-label= "Browser: activate to sort column ascending" >Customer Code class = "sorting" tabindex= "0" aria-controls= "example2" rowspan= "1" colspan= "1" aria-label= "Platform(s): activate to sort column ascending" >Email class = "sorting" tabindex= "0" aria-controls= "example2" rowspan= "1" colspan= "1" aria-label= "Engine version: activate to sort column ascending" >Customer FirstName class = "sorting" tabindex= "0" aria-controls= "example2" rowspan= "1" colspan= "1" aria-label= "CSS grade: activate to sort column ascending" >Status class = "sorting" tabindex= "0" aria-controls= "example2" rowspan= "1" colspan= "1" aria-label= "CSS grade: activate to sort column ascending" >Customer LastName class = "sorting" tabindex= "0" aria-controls= "example2" rowspan= "1" colspan= "1" aria-label= "CSS grade: activate to sort column ascending" >Create Date class = "sorting" tabindex= "0" aria-controls= "example2" rowspan= "1" colspan= "1" aria-label= "CSS grade: activate to sort column ascending" >Updated Date "let dataItem of UsersList" > {{dataItem.id}} {{dataItem.customerCode}} {{dataItem.email}} {{dataItem.firstName}} {{dataItem.status}} {{dataItem.lastName}} {{dataItem.createDate}} {{dataItem.updateDate}} import { AfterViewInit, Component, OnDestroy, OnInit } from '@angular/core' ; import { SharedService } from '../shared.service' ; import { DataTablesModule } from 'angular-datatables' ; import {Subject} from 'rxjs' ; @Component({ selector: 'app-users' , templateUrl: './users.component.html' , styleUrls: [ './users.component.sass' ] }) export class UsersComponent implements OnInit,OnDestroy { constructor( private service:SharedService) { } UsersList:any=[]; dtOptions: DataTables.Settings = {}; dtTrigger: Subject = new Subject (); ngOnDestroy(): void { this .dtTrigger.unsubscribe(); } ngOnInit(): void { this .getUsers(); this .dtOptions= { pagingType: 'full_numbers' , pageLength:5, lengthMenu:[5,15,25], processing: true , data: this .UsersList, // notice here columns: [ {title: 'CustomId' , data: 'id' }, {title: 'Customer Code' , data: 'customerCode' }, {title: 'email' , data: 'email' }, {title: 'firstName' , data: 'firstName' }, {title: 'status' , data: 'status' }, {title: 'lastName' , data: 'lastName' }, {title: 'createDate' , data: 'createDate' }, {title: 'updateDate' , data: 'updateDate' }, ], rowCallback: (row: Node, data: any[] | object, index: number) => { const self = this ; $( 'td' , row).unbind( 'click' ); $( 'td' , row).bind( 'click' , () => { }); return row; } }; } getUsers() { this .service.getUser().subscribe(data=>{ this .UsersList=data; }); } }