Angular Jquey Datatable动态ngModel绑定值服务器过滤器或进程

Question

如何设置Angular jQuery数据表以将动态参数发送到服务器。

数据应在服务器上处理。

参数绑定到ngModel，并在“ onChange”事件期间触发，重新呈现数据表。如何做到这一点。

Answer 1

组件HTML页面

在更改或键入时，调用重新渲染功能

    <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>

组件TS页面

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();
    });
  }

}