Angular jQuery Datatable Dynamic ngModel bind values and server filtering or processing - mData error manage

Question

How to set up Angular jQuery datatable to send dynamic parameters to the server?

The data should be processed at the server.

The parameters are bound to ngModel and are to fire during "onChange" event , rerenders the datatable. How to achieve this?

Answer 1

Component HTML page

On change or keyup, rerender function is called

    <select
        name="DoctorID"
        [(ngModel)]="this.DoctorID"
        (change)="this.rerender()"
        class="form-control">
        <option value>All Doctor</option>
        <option
            *ngFor="let item of this.DoctorList"
            value="{{item.Id}}">
            {{ item.FirstName }}
        </option>
    </select>

    <input
        type="text"
        name="OpCardNumberFilter"
        [(ngModel)]="this.OpCardNumberFilter"
        (keyup)="this.rerender()"        
        class="form-control"
        placeholder="OP CARD NUMBER"
        autocomplete="off">


<div class="row">
    <div class="col-md-12">
        <br>
        <div class="table-responsive">
            <table
                style="width:100%"
                datatable
                [dtOptions]="dtOptions"
                [dtTrigger]="dtTrigger"
                class="table table-border table-striped custom-table datatable mb-0"
            >
                <thead>
                    <tr>
                        <th>Booking No</th>
                        <th>Op Number</th>
                        <th>Patient</th>
                        <th>Contact No</th>
                        <th>Contact No 2</th>
                        <th>Date</th>
                        <th>Status</th>
                        <th>Category</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody *ngIf="BookingList?.length != 0">
                    <tr *ngFor="let item of BookingList">
                        <td>{{ item.ReferenceNumber }}</td>
                        <td>{{ item.OpCardNo }}</td>
                        <td>{{ item.PatientName }}</td>
                        <td>{{ item.RegisteredNumber }}</td>
                        <td>{{ item.ContactNumber }}</td>
                        <td>{{ item.BookedDate }}</td>
                        <td>{{ item.IsCancelled }}</td>
                        <td>{{ item.ConsultationOrFollowUp }}</td>
                        <td>{{ item.ConsultationOrFollowUp }}</td>
                    </tr>
                </tbody>
                <tbody *ngIf="BookingList?.length == 0">
                    <tr>
                        <td colspan="8" class="no-data-available text-center">
                            No data!
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Component TS page

import { DataTablesResponseModel } from '../../shared/data-tables-response-model';
import { Router } from '@angular/router';
import { environment } from 'environments/environment';
import {
  Component,
  OnInit,
  ViewChild,
  AfterViewInit,
  OnDestroy
} from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Subject } from 'rxjs';
import { DataTableDirective } from 'angular-datatables';
import { BookingModel2 } from 'app/shared/booking-model';

@Component({
  selector: 'app-bookings',
  templateUrl: './bookings.component.html',
  styleUrls: ['./bookings.component.scss']
})
export class BookingsComponent implements OnInit, AfterViewInit, OnDestroy {

  @ViewChild(DataTableDirective)
  dtElement: DataTableDirective;  
  dtTrigger = new Subject();
  dtOptions: DataTables.Settings = {};
  DoctorID: string;
  rootUrl = '';
  OpCardNumberFilter: string;
  BookingList: BookingModel2[];

  constructor(
    private http: HttpClient,
    private router: Router,
  ) { }

  ngOnInit() {
    this.LoadGrid("");
    this.DoctorID = '';
    this.OpCardNumberFilter = '';
  }

  LoadGrid(QueryString: string): void {
    this.rootUrl = environment.rootUrl;
    const that = this;
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 10,
      serverSide: true,
      processing: true,
      dom: 'lrtip',
      ajax: (dataTablesParameters: any, callback) => {
        that.http
          .post<DataTablesResponseModel>(
            environment.rootUrl + '/data/GetPatientList',
            dataTablesParameters,
            {
              params:
              {
                DoctorID: this.DoctorID,                //dynamic parameters
                OpCardNumber: this.OpCardNumberFilter,
              }
            }
          )
          .subscribe(resp => {
            that.BookingList = resp.data;

            callback({
              recordsTotal: resp.recordsTotal,
              recordsFiltered: resp.recordsFiltered,
              data: []
            });
          });
      },
      columns: [
        { data: 'PatientName' },
        { data: 'BookedDate' },
        { data: 'ContactNumber' },
        { data: 'ConsultationOrFollowUp' },
        { data: 'ConsultationOrFollowUp' },
        { data: 'ConsultationOrFollowUp' },
        { data: 'ConsultationOrFollowUp' },
        { data: 'ConsultationOrFollowUp' },
        { data: 'ConsultationOrFollowUp' }
      ]
    };
  }

  SearchBooking(): void {
    this.LoadGrid("");
    this.rerender();
  }


  ngAfterViewInit(): void {
    // Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
    // Add 'implements AfterViewInit' to the class.
    this.dtTrigger.next();
  }

  ngOnDestroy(): void {
    // Do not forget to unsubscribe the event
    this.dtTrigger.unsubscribe();
  }

  rerender(): void {
    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
      // Destroy the table first
      dtInstance.destroy();
      // Call the dtTrigger to rerender again
      this.dtTrigger.next();
    });
  }

}