Getting error in Angular 5 Datatables: cannot reinitialise DataTable
I solved this problem by removing the following code in *.ts file:
dtOptions: DataTables.Settings = {};
this.dtOptions = {
};
I am using DataTable in Angular7 and Bootstrap4
Step1: Install the package
npm i angular-datatables@6 [email protected] [email protected] --save
Step2: In angular.json
"styles": [ "./node_modules/datatables.net-dt/css/jquery.dataTables.css" ], "scripts": [ "node_modules/datatables.net/js/jquery.dataTables.js" ],
Step3: Inside app.module.ts
import { DataTablesModule } from 'angular-datatables';
imports: [
.......
DataTablesModule
]
Step4: Inside html
<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" >...</table>
Step5: Inside ts
import { Component, OnInit, AfterViewInit, OnDestroy, ViewChild } from '@angular/core';
declare var jQuery:any;
import { DataTableDirective } from 'angular-datatables';
import { Subject } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { environment } from '../../environments/environment';
export class YourComponent implements OnInit, AfterViewInit, OnDestroy {
@ViewChild(DataTableDirective) dtElement: DataTableDirective;
dtOptions: DataTables.Settings = {};
dtTrigger: Subject<any> = new Subject();
ajxrequrl: string = environment.hostUrl + '/api/userList';
start: number = 0; length: number = 10; draw: number = 1;
postparams = {};
constructor( private _http: HttpClient ) { }
getListData(filterData, t) {
//console.log(filterData);
var zone = (filterData.zone != undefined ) ? filterData.zone : 0 ;
var state = (filterData.state != undefined ) ? filterData.state : 0 ;
var studentType = (filterData.studentType != undefined ) ? filterData.studentType : 0 ;
var status = (filterData.status != undefined ) ? filterData.status : 0 ;
var grade = (filterData.grade != undefined ) ? filterData.grade : 0 ;
var startDate = (filterData.startDate != undefined ) ? filterData.startDate : 0 ;
var endDate = (filterData.endDate != undefined ) ? filterData.endDate : 0 ;
const that = this;
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: this.length,
displayStart: this.start,
autoWidth: false,
serverSide: true,
processing: true,
searching: true,
order: [],
columnDefs: [ {
'targets': [0], /* column index [0,1,2,3]*/
'orderable': false, /* true or false */
}],
ajax: (dataTablesParameters: any, callback) => {
var orderColumn = ''; var orderBy = ''; var order = 0;
if(dataTablesParameters.order.length) {
var sortarr = ['classId', 'full_name', 'age', 'status', 'grade', 'zone', 'state', 'type', ... <all columns>];
orderColumn = sortarr[dataTablesParameters.order[0].column];
orderBy = dataTablesParameters.order[0].dir;
order = 1;
}
/* Sending data through GET */
/*
that.getparams = "?start="+dataTablesParameters.start
+"&length="+dataTablesParameters.length
+"&order="+order
+"&orderColumn="+orderColumn
+"&orderBy="+orderBy
+"&zone="+zone
+"&state="+state
+"&studentType="+studentType
+"&status="+status
+"&grade="+grade
+"&startDate="+startDate
+"&endDate="+endDate;
//+"&search="+encodeURI(dataTablesParameters.search.value);
that._http.get(that.ajxrequrl + that.getparams, {}).subscribe(resp => {
*/
/* Sending data through POST */
that.postparams = {
start: dataTablesParameters.start,
length: dataTablesParameters.length,
order: order,
orderColumn: orderColumn,
orderBy: orderBy,
search: dataTablesParameters.search,
//filterData: filterData
zone: zone,
state: state,
studentType: studentType,
status: status,
grade: grade,
startDate: startDate,
endDate: endDate
};
//jQuery('.dataTables_filter label input').attr("placeholder", "CL Contract ID or Customer Name or Case No");
//jQuery('.dataTables_filter label input').css({'width': '350px', 'display': 'inline-block'});
this._http.post( that.ajxrequrl, that.postparams, {} ).subscribe(
resp => {
that.listData = resp['data'];
that.start = resp['start'];
callback({
recordsTotal: resp['recordsTotal'],
recordsFiltered: resp['recordsFiltered'],
data: []
});
},
error => {
console.log(error);
}
);
}
};
if(t == 1) {
this._othercaseService.filterList(filterData).subscribe(
(resp) => {
this.rerender();
this.listData = resp['data'];
if(resp['status'] == 0) {
//this.resetForm();
}
});
}
}
ngOnDestroy(): void {
// Do not forget to unsubscribe the event
this.dtTrigger.unsubscribe();
}
rerender(): void {
this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
// Destroy the table first
dtInstance.destroy();
// Call the dtTrigger to rerender again
this.dtTrigger.next();
});
}
ngAfterViewInit() {
this.dtTrigger.next();
this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
dtInstance.on( 'draw.dt', function () {
if(jQuery('.dataTables_empty').length > 0) {
jQuery('.dataTables_empty').remove();
}
});
});
}
onSubmit(formData: NgForm) { // This function is called after a filter form searched
this.getListData(formData, 1);
}
resetForm(pageStart: number = 1) {
if(!pageStart) this.start = 0;
}
deleteUser(pkId) {
/* After Delete code */
this.getListData({}, 0);
}
}
Step6: Inside your controller api call
module.exports.userList = (req, res, next) => {
let reqData = req.body;
var sql = 'SELECT .... FROM ....';
/* ----- started changes for filter (just example)----- */
sql = (reqData.grade) ? sql + ' AND grade = "' + reqData.grade + '"' : sql;
sql = (reqData.status) ? sql + ' AND status = "' + reqData.status + '"' : sql;
............
/* ----- end of changes for filter ----- */
/* ----- started changes for pagination ----- */
sql = (!reqData.orderColumn || !reqData.orderBy) ? sql + ' ORDER BY pkId DESC' : sql+ ' ORDER BY ' + reqData.orderColumn + ' ' + reqData.orderBy;
var start = (reqData.start) ? reqData.start : 0;
var length = (reqData.length) ? reqData.length : 10;
/* ----- end of changes for pagination ----- */
mysql.conn.query(sql, (err, rows) => {
if(err) {
res.json({'status': 1, 'data': [], 'message': 'No result found'});
}
var len = rows.length;
if(len) {
sql += ' LIMIT ' + start + ',' + length;
mysql.conn.query(sql, (err, rows1) => {
if (!err) {
res.json({'status': 0, 'data': rows1, 'recordsTotal': len, 'recordsFiltered': len, 'start': start, 'draw': 1});
} else {
res.json({'status': 1, 'data': [], 'message': 'No result found'});
}
});
} else res.json({'status': 1, 'data': [], 'message': 'No result found'});
});
}
I think it is because you are using [dtTrigger]="dtTrigger"
in Angular DataTables and rerendering the table on the same page. If you have this problem you should use the following trick to handle dtTrigger
<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table">
Make sure you do not use this.dtTrigger.next()
on ngOnInit()
ngAfterViewInit(): void {
this.dtTrigger.next();
}
Rerender it when you use the second time
rerender(): void {
this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
dtInstance.destroy();
this.dtTrigger.next();
});
}