Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

Refresh DataTable and change to view new fetched data


Hi,

I have a question about Refresh/Reinitialize DataTable.

Im using Metronic v9.0.4 with Angular. The DataTable component is working fine and now I want to implement function to fetch new data and view new fetched data. How to refresh/reinitialize the DataTable when a button was clicked without reload the page?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)


Hi

You need to:
- Destroy the existing DataTable instance.
- Fetch the new data from your API.
- Reinitialize the DataTable with the new dataset.

Here some example datatable code:

import { Component, OnInit, ViewChild } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { DataTableDirective } from "angular-datatables";
import { Subject } from "rxjs";

@Component({
selector: "app-my-table",
templateUrl: "./my-table.component.html",
styleUrls: ["./my-table.component.scss"]
})
export class MyTableComponent implements OnInit {

@ViewChild(DataTableDirective, { static: false }) dtElement!: DataTableDirective;

dtOptions: DataTables.Settings = {};
dtTrigger: Subject<any> = new Subject<any>();
tableData: any[] = [];

constructor(private http: HttpClient) {}

ngOnInit(): void {
this.dtOptions = {
pagingType: "full_numbers",
pageLength: 10,
processing: true
};
this.loadData();
}

loadData() {
this.http.get<any[]>("YOUR_API_ENDPOINT").subscribe(data => {
this.tableData = data;
this.dtTrigger.next(null); // Initialize DataTable
});
}

refreshTable() {
this.http.get<any[]>("YOUR_NEW_API_ENDPOINT").subscribe(data => {
this.tableData = data;

this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
dtInstance.clear(); // Clear existing table data
dtInstance.rows.add(this.tableData); // Add new data
dtInstance.draw(); // Redraw the table
});
});
}

ngOnDestroy(): void {
this.dtTrigger.unsubscribe();
}
}



How It Works
- loadData(): Fetches initial data and initializes DataTable.
- refreshTable(): Calls a new API to get fresh data.
- Uses dtInstance to clear and add the new data dynamically.
- Redraws the table.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(