2021-05-18
1853
#angular
Kenneth Ekandem
49523
May 18, 2021 ⋅ 6 min read

Using Angular DataTables to build feature-rich tables

Kenneth Ekandem Software engineer with four years' experience in PHP and JavaScript. Currently working as a backend developer for Codekago Interactive.

Recent posts:

Build Full-Stack App React Goxygen

Build a full-stack app with React and Goxygen

We show how to use Goxgen to scaffold a full-stack React app. See how to integrate React with Go and modify Goxygen to suit your project requirements.

Clara Ekekenta
Dec 6, 2023 ⋅ 8 min read
Express Js Adoption Guide Overview Examples Alternatives

Express.js adoption guide: Overview, examples, and alternatives

Express.js is a Node.js framework for creating maintainable and fast backend web applications in JavaScript. In the fast-paced world of […]

Antonello Zanini
Dec 6, 2023 ⋅ 17 min read
Nesting web components in vanilla JavaScript

Nesting web components in vanilla JavaScript

Web components are underrated for the performance and ergonomic benefits they provide in vanilla JS. Learn how to nest them in this post.

Mark Conroy
Dec 5, 2023 ⋅ 10 min read
Using Defer In Angular 17 To Implement Lazy Loading

Using defer in Angular 17 to implement lazy loading

Angular’s new defer feature, introduced in Angular 17, can help us optimize the delivery of our apps to end users.

Lewis Cianci
Dec 4, 2023 ⋅ 10 min read
View all posts

11 Replies to "Using Angular DataTables to build feature-rich tables"

  1. Very useful, Thank you.
    How can we customize the language, from english to french as example ?
    Thanks

  2. ERROR TypeError: Cannot read properties of undefined (reading ‘ext’)
    I got this error in ngOnInit() at $.fn.dataTable.ext.search.push(…

  3. I use a default data as a test…then update de data and it draw properly…. but when I try to filter the data showed is the old data.. It seams that node update the html but not the DOM datatable so the filter follow working with the old data. it look like $().DataTable().rows().data is not updated with the new data…

  4. In Angular 14 and RXJS 7, had to feed this.dtTrigger.next(); the array that contains the response list from the API call, so : this.dtTrigger.next(this.reports); for me, replace this.reports with your custom array

  5. Buttons are not displaying for me.
    ngOnInit(): void {
    this.dtOptions = {
    dom:’Bfrtip’,
    }
    this.fetchData()
    }

    html:

    …..table data……..

  6. Currently, this tutorial is not working. I did it exactly the way you explain it, but
    1- I don’t get the users.
    2- I get a lot of syntax errors.
    3- The table doesn’t even show any style, it just displays the name of the columns.

Leave a Reply