angular datatable rerender

giri_s

Hello,

I have the below setting for my angular application datatable. But when i rerender the datatable it is zooming out the datatable and coming back to the actual size. How can i fix the height of the datatable so that other object below table will be visible always or how can i fix the datatable height ?

ngOnInit(): void {

this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 10,
processing: true,
scrollY: "260px",
scrollCollapse: false,
responsive: true,
language: {
emptyTable: ' '
}
};

}

ngAfterViewInit(): void {
this.dtTrigger.next();
}

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();
});
}

kthorngren

My guess is your initial table is displayed in the DOM then you apply Datatables. The change in size is due to datatables reformatting the table into a Datatable. If this is the case you could hide the table then in initComplete show the table. You may nee to also use columns.adjust() after showing the hidden Datatable.

If this doesn't help then we will need to see the issue to offer suggestions. Please post a link to your page or a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin