CODEWITHSUNDEEP
angularangular-datatables
Rajasekhar
Rajasekhar

Reputation: 2455

Angular Datatables: ERROR Error: Cannot read property 'then' of undefined

While trying the column search, I'm getting "ERROR Error: Cannot read property 'then' of undefined". Could you please suggest me the issue...

datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
    dtInstance.columns().every(function () {
      const that = this;
      $("input", this.footer()).on("keyup change", function () {
        if (that.search() !== this["value"]) {
          that.search(this["value"]).draw();
        }
      });
    });
  });

Stackblitz

enter image description here

Upvotes: 1

Views: 1147

Answers (1)

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17600

You should rerender rather than using in ngAfterviewInit Demo

rerender(){
    this.datatableElementList.forEach(datatableElement=>{
        datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
          dtInstance.columns().every(function () {
            const that = this;
            $("input", this.footer()).on("keyup change", function () {
              if (that.search() !== this["value"]) {
                that.search(this["value"]).draw();
              }
            });
          });
        });
    
        datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
          dtInstance.columns().every(function () {
            const that = this;
            $("input", this.footer()).on("keyup change", function () {
              if (that.search() !== this["value"]) {
                that.search(this["value"]).draw();
              }
            });
          });
        });
    });
  }

  ngAfterViewInit(): void {
    this.dtTrigger1.next();
    this.dtTrigger2.next();
  }

Upvotes: 1

Related Questions