Datatables style and sorting feature doesn't load on first load of the browser in Angular.
Datatables style and sorting feature doesn't load on first load of the browser in Angular.
MinhajBoss
Posts: 1Questions: 1Answers: 0
here is the video demo:
https://streamable.com/t49kwd
Debugger code (debug.datatables.net):
Getting an error on the console:
https://images2.imgbox.com/4f/0d/0hOjsLIu_o.png
create_dept:1
Refused to apply style from 'http://localhost:4200/node_modules/datatables.net-dt/css/jquery.dataTables.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.:
Datatables style and sorting feature doesn't load on first load of the browser in Angular. but it loads properly when I reload the browser
here is the code I have implemented:
HTML CODE:
**
| Department ID | Department Name | Department Manager | Actions |
|---|---|---|---|
| {{dept.id}} | {{dept.dept_name}} | {{dept.dept_manager}} | Edit Delete |
**
Code on Component:
**ngAfterViewInit(): void {
// this method if for data table
// tuts: https://webdamn.com/how-to-use-datatables-in-angular-8/
// https://datatables.net/examples/index
$(document).ready(function () {
$('#table_id').DataTable({
destroy: true
});
});
}**
Answers
I'm not familiar with Angular but the error:
Might be related to the Angular environment. Not sure if it will help but see this SO thread.
Is this the only Datatable config reference you have?
In looking at the video it looks like the table has rows then you click a column to sort and the rows disappear. And it has something like
Showing 0 to 0 of 0 entries. Before sorting does it show the sameShowing 0 to 0 of 0 entries? This suggests the HTML table is populated after Datatables is initialized. In this case Datatables doesn't know about the added rows. Make sure to initialize Datatables after the HTML table is populated. Also see this FAQ.If this doesn't help then please post a link to your page or a test case replicating the issues so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin