Datatable.net paging not showing in Angular 7 project

Asked Apr 26 '19 at 08:27

Active Apr 26 '19 at 08:29

Viewed 1,336 times

I am trying to get Datatables.net to work in my Angular 7 project. The table renders fine, but it does not show sorting on columns, paging buttons etc, here is an image of my table missing the above mentioned:

Here is my project specifications:

Angular CLI version 7
Bootstrap-4.3.1

I followed this article, and although it referes to Angular 6, I am assuming process should be similiar.

Here is my scripts/styles within the angular.jsonfile.

I am setting the DataTable options as follow within my .ts class:

dtOptions: DataTables.Settings = {
    pagingType: 'full_numbers',
    pageLength: 20,
    paging: true
};

And then binding the above options to my table as follow:

<table datatable [hidden]="!hasData" [dtOptions]="dtOptions" [dtTrigger]="dtTrigger".

I do not have any console errors, so finding out what is wrong is quite difficult.

Am I missing something?

edited Apr 26 '19 at 08:29

asked Apr 26 '19 at 08:27

monstertjie_za

7,277
8
42
73

Can you provide stackblitz? – Prashant Pimpale Apr 26 '19 at 08:28
Have you tried it with more items than the page length? With four items it seems reasonable that page controls wouldn't be shown. – jonrsharpe Apr 26 '19 at 08:29
@jonrsharpe I have yes. But even with only four items in the table, I should still see the "Showing x to y of z entries". – monstertjie_za Apr 26 '19 at 08:30
@PrashantPimpale Busy with a stackblitz – monstertjie_za Apr 26 '19 at 08:35
please try removing the `dtTrigger` – ahmeticat Apr 30 '19 at 06:03
@ahmeticat I have actually solved this yesterday, by in fact, removing the dtTrigger. Not sure why this caused problems. – monstertjie_za Apr 30 '19 at 06:52
Do you use Metronic Angular theme? – ahmeticat Apr 30 '19 at 07:55
@ahmeticat Using the default theme – monstertjie_za Apr 30 '19 at 08:16

Datatable.net paging not showing in Angular 7 project

0 Answers0