Angular 9 Datatable Binding with dtOptions

Angular 9, Angular 10

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 9 Datatable Binding with dtOptions.

Please watch this video for proper understanding

Here is the code snippet and please use carefully:

1. Here are the basics commands you need to run to set datatable into your angular 9 application:

npm install jquery --save

npm install datatables.net --save

npm install datatables.net-dt --save

npm install angular-datatables --save

npm install @types/jquery --save-dev

npm install @types/datatables.net --save-dev

npm install bootstrap --save

 

2. Now you need to add below code into your angular.json file:

"styles": [
             ...
       "node_modules/bootstrap/dist/css/bootstrap.min.css",
       "node_modules/datatables.net-dt/css/jquery.dataTables.css"
           ],
           "scripts": [
            ...
       "node_modules/jquery/dist/jquery.min.js", 
       "node_modules/bootstrap/dist/js/bootstrap.min.js",
       "node_modules/datatables.net/js/jquery.dataTables.js"
     ]

 

3. Now you need to run below code into your app.module.ts file:

...
import {DataTablesModule} from 'angular-datatables';

imports: [
    ...
  DataTablesModule
  ],

 

4. Now you need to add below code into your app.component.ts file:

...
public dataa = [
    {name: 'Ajay', email: 'therichpost@gmail.com', website:'therichpost.com'},
    {name: 'Jas', email: 'therichpost@gmail.com', website:'therichpost.com'},
    {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
    {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
  {name: 'Jas', email: 'therichpost@gmail.com', website:'therichpost.com'},
    {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
    {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
  {name: 'Jas', email: 'therichpost@gmail.com', website:'therichpost.com'},
    {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
    {name: 'therichpost', email: 'therichpost@gmail.com', website:'therichpost.com'},
  ];

  dtOptions: DataTables.Settings = {};

  ngOnInit() {
  this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 5,
    lengthMenu : [5, 10, 25],
      processing: true
    };
}

 

5. Finally you need to add below code inside your app.component.html file:

<div class="container">
<table class="table table-striped table-bordered table-sm row-border hover" datatable [dtOptions]="dtOptions">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Website</th>
    </tr>
  </thead>
  <tbody>
   <tr *ngFor="let group of dataa">
         <td>{{group.name}}</td>
         <td>{{group.email}}</td>
         <td>{{group.website}}</td>
     </tr>
  </tbody>
</table>
</div>

 

This is it and if you have any kind of query regarding Datatable Binding with dtOptions then you can watch above video or you can comment below.

Jassa

Thank you

Comments

12 responses to “Angular 9 Datatable Binding with dtOptions”

  1. koti Avatar
    koti

    pagination is not working for me. So could you please help me on this.

  2. Christine Avatar
    Christine

    Hello. The datatable is displaying. However, it is also displaying ‘No data available in table’. Kindly assist.

  3. Christine Avatar
    Christine

    I’m now getting ‘DataTables warning: table id=example – Cannot reinitialise DataTable’ message

  4. Ajay Malhotra Avatar

    There must be issue in your side. Please check properly.

  5. Christine Avatar
    Christine

    Been able to fix it.

  6. imen Avatar
    imen

    node_modules/datatables.net/types/types.d.ts:148:28 – error TS2315: Type ‘RowSelector’ is not generic.

    148 cells(rowSelector: RowSelector, columnSelector: CellSelector, modifier?: ObjectSelectorModifier): CellsMethods; ~~~~~~~~~~~~~~
    node_modules/datatables.net/types/types.d.ts:1273:23 – error TS2315: Type ‘RowSelector’ is not generic.

    1273 (rowSelector: RowSelector, modifier?: ObjectSelectorModifier): RowMethods;
    1352 (rowSelector: RowSelector, modifier?: ObjectSelectorModifier): RowsMethods;
    ~~~~~~~~~~~~~~
    node_modules/datatables.net/types/types.d.ts:2707:21 – error TS2314: Generic type ‘Iterator’ requires 1 type argument(s).

    2707 generate(): Iterator<Api, Node, Api>;

    ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** http://localhost:4200/ **
    i 「wdm」: Failed to compile.

  7. Mohib Avatar
    Mohib

    you are super

  8. hammami jamel Avatar
    hammami jamel

    Can’t bind to ‘dtOptions’ since it isn’t a known property of ‘table’