Angular + Jquery Datatable responsivness not working

Question

I am using the following extension https://l-lin.github.io/angular-datatables/#/getting-started

To make my jquery datatable responsive. In my angular.json file Ihave added the following lines.

 "styles": [
 "node_modules/datatables.net-dt/css/jquery.dataTables.css",
 "node_modules/bootstrap/dist/css/bootstrap.min.css",
 "node_modules/font-awesome/css/font-awesome.css",
 "node_modules/material-icons/css/material-icons.css",
 "node_modules/datatables.net-colreorder-dt/css/colReorder.dataTables.css",
 "node_modules/ngx-toastr/toastr.css",
 "src/styles.css"
 ],
 "scripts": [
 "node_modules/jquery/dist/jquery.js",
 "node_modules/datatables.net/js/jquery.dataTables.js",
 "node_modules/datatables.net-colreorder/js/dataTables.colReorder.js"
 ]

I then have imported DataTableModule in my app.module

imports: [
 CommonModule,
 BrowserModule,
 DataTablesModule,
 HttpClientModule,
 BrowserAnimationsModule,
 ToastrModule.forRoot(),
 TranslateModule.forRoot({
 loader: {
 provide: TranslateLoader,
 useFactory: httpTranslateLoader,
 deps: [HttpClient]
 }
 }),
 FormsModule,
 ReactiveFormsModule,
 AppRoutingModule,
 NgbModule
 ],

I then have then created the following table here is the html of that table

<table datatable [dtOptions]="dtOptions" class="display table table-striped table-bordered dt-responsive row-border hover" *ngIf="employees">
 <thead>
 <tr>
 <th>{{ 'employee.Number' | translate }} </th>
 <th>{{'employee.UserName' | translate}}</th>
 <th>
 <span class="material-icons" (click)="addEmployee()" href="javascript:void(0);">
 add_box
 </span>
 </th>
 </tr>
 </thead>
 <tbody>
 <tr *ngFor="let employee of employees">
 <td>{{ employee.id }}</td>
 <td>{{ employee.userName }}</td>
 <td>
 <a [title]="employee.id + ' employee-details'" [routerLink]="['/employees', employee.id]">
 <span class="material-icons md-18">
 edit
 </span>
 </a>
 </td>
 </tr>
 </tbody>
</table>

And here is the typescript file of the table.

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { Employee } from '../models/Employee';
import { UserService } from '../services/employee.service';
@Component({
 selector: 'app-employees',
 templateUrl: './employees.component.html',
 styleUrls: ['./employees.component.css']
})
export class EmployeesComponent implements OnInit {
 dtOptions: DataTables.Settings = {};
 public employees: Employee[];
 constructor(private employeeService: UserService ,private http: HttpClient) { }
 ngOnInit(): void {
 this.dtOptions = {
 pagingType: 'full_numbers',
 pageLength: 10,
 processing: true,
 responsive: true,
 columnDefs: [{
 targets: [6],
 orderable: false,
 width: "50px"
 }]
 };
 this.employeeService.getEmployees().subscribe(result => {
 this.employees = result;
 }, error => {
 console.log(error)
 });
 }
}

Sadly it does not work any help would be very appreciated. Thank you.

• danday74: whats the error?
• J.C: @danday74 I do no see any error in the terminal nor in the visual studio 2019 console. But I do not see the green circle in my jquery data table with the plus when screen is smaller.

Answer 1

Please visit the Download Page, and make sure to select everything that you plan on using in DataTable. In your angular.json file, I can tell you are missing two files necessary to actually enable the responsive: true, option.

You have not included the JS script and CSS stylesheet for the DataTables responsive option.

Here are the links to download the script and stylesheet: https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js

Download those and be sure to reference them correctly in your Angular.json file.

i.e.

 "styles": [
 "node_modules/datatables.net-dt/css/jquery.dataTables.css",
 "node_modules/bootstrap/dist/css/bootstrap.min.css",
 "node_modules/font-awesome/css/font-awesome.css",
 "node_modules/material-icons/css/material-icons.css",
 "node_modules/datatables.net-colreorder-dt/css/colReorder.dataTables.css",
 "node_modules/datatables.net-responsive-dt/css/responsive.dataTables.min.css",
 "node_modules/ngx-toastr/toastr.css",
 "src/styles.css"
 ],
 "scripts": [
 "node_modules/jquery/dist/jquery.js",
 "node_modules/datatables.net/js/jquery.dataTables.js",
 "node_modules/datatables.net-colreorder/js/dataTables.colReorder.js",
 "node_modules/datatables.net-responsive/js/dataTables.responsive.min.js"
 ]

• J.C: Thank you. Thank you it works. But I do not understand why my refrence in index.html <script src="source to responsive.min.js"></script> does not work but it works when added in index.html. Could you explain the difference Please.
• BeerusDev: @JuniorCortenbach Sorry for the late response, but Angular has it's own way to initialize your global css/js source files. This is by adding them to the styles and scripts arrays located in your angular.json. If you want to add in the head tag of your index.html, you must link it to the correct node module. i.e <script src="node_modules/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
• BeerusDev: If my answer helped, please don't forget to award the bounty :)