datatable - 如何在角度数据表中添加自定义搜索

Question

我想使用数据表实现自定义搜索。请建议在调用自定义ajax进行搜索后如何初始化数据表。我试图初始化 this.dtOptions 但什么也没发生

谢谢

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpResponse } from '@angular/common/http';
import { DataTablesResponse } from '../datatables/datatables-response';
import { Person } from './person';

@Component({
    selector: 'app-angular-way-server-side',
    templateUrl: 'angular-way-server-side.component.html',
    styleUrls: ['angular-way-server-side.component.css'],
})
export class AngularWayServerSideComponent implements OnInit {
    dtOptions: DataTables.Settings = {};
    persons: Person[];

    constructor(private http: HttpClient) { }

    ngOnInit(): void {
        var that = this;

        this.dtOptions = {
            pagingType: 'full_numbers',
            serverSide: true,
            processing: true,
            ajax: (dataTablesParameters: any, callback) => {
                that.http
                    .post<DataTablesResponse>('/api/Persons', dataTablesParameters, {})
                    .subscribe(resp => {
                        that.persons = resp.data;

                        callback({
                            recordsTotal: resp.recordsTotal,
                            recordsFiltered: resp.recordsFiltered,
                            data: [],
                        });
                    });
            },
            columns: [
                { data: "id" },
                { data: "firstName" },
                { data: "lastName" },
            ],
        };
    }
}

标签： datatableangular8

Answer 1

我们可以使用 DataTables.Api 重新初始化数据表，下面是代码

rerender(search): void {

    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {

      // Destroy the table first
      dtInstance.destroy();

      // Call the dtTrigger to rerender again
      this.dtTrigger.next();
    }).then(()=>{ this.ngOnInit();});

  }