Angular2 angular-datatables is not working

Question

ngOnInit() {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 2
    };
 
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 2
    };
    this.allservice.getUrl(this.listUserUrl)
    .subscribe(data=>{
      this.listUser=data.responseContents
   

    });
  }
  
  ## angular.json:
    "styles": [
              "src/styles.css",
              "node_modules/datatables.net-dt/css/jquery.dataTables.css"

            ],
            "scripts": [

 "node_modules/jquery/dist/jquery.js",
              "node_modules/datatables.net/js/jquery.dataTables.js"

            ]

<table datatable  [dtOptions]="dtOptions" class="row-border hover">
  <thead>
    <tr>
        <th class="text-center width-10"> Name
       </th>
      <th class="text-center"> User Name
           
      </th>
    
    </tr>
  </thead>
  <tbody>
    <tr  *ngFor = "let i = index ; let x of listUser ">
          <td class="text-center">{{x.name}}</td>
      <td>{{x.username}}</td>
   
         
    </tr>
  </tbody>
</table>

In this Iam trying to use datatable on first loading Im getting the data in table but If I do any sort r filter,pagenation it showing No data Found.I dont no where Im making mistake can any one help to solve this problem.

l-lin.github.io/angular-datatables/#/basic/angular-way .I'm following this link. — Thilagavathy
– Thilagavathy, Commented Aug 17, 2018 at 5:23

Sanjay kumar · Accepted Answer · 2018-09-09 11:01:31Z

1

try this link Datatables Plugin in Angular 6

answered Sep 9, 2018 at 11:01

Sanjay kumar

1,67312 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

prisar · Accepted Answer · 2019-05-30 06:34:19Z

0

I was getting no data found even if rows were loaded above that message. I got it solved using dtTrigger as explained below.

Make sure you are putting [dtTrigger]="dtTrigger" inside table tag in template. dtTrigger: Subject<any> = new Subject(); as component property. And after calling service put this.dtTrigger.next(); to tigger datatable rendering.

answered May 30, 2019 at 6:34

prisar

3,2052 gold badges28 silver badges27 bronze badges

Collectives™ on Stack Overflow

Angular2 angular-datatables is not working

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related