使用ajax进行输入时在输入时进行角度数据表搜索的Typescript代码转换

时间:2019-07-18 19:51:49

标签: search datatable angular8

 @Input() fields = [];
  @Input() headings = [];
  @Input() link = "";
  @Input() showRows = 10;
  @Input() delay = 4000;
  @Input() searchOnFields = [];
  @Input() retrivedObj = {};
  @Output() toEdit = new EventEmitter<number>();
  @Output() toDelete = new EventEmitter<number>();
  dtOptions: DataTables.Settings = {};
  details: [];
  flagTotal = true;
  flag = false;
  totalRecords = 0;
  falseFlag = true;
  value;
  data: any[];
  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.dtOptions = {
      pageLength: this.showRows,   // Default Length For Displaying No. of Rows
      serverSide: true, // recalling server for fetching data
      processing: true, // Server side Processing
      searching: true,  // Providing Searching functionality 
      searchDelay: this.delay,  // Providing Searching functionality 
      responsive: true,
      columnDefs: [{ searchable: false, orderable: false, targets: [0] }],

      ajax: (dataTablesParameters: any, callback) => {
        var sObj = dataTablesParameters['search'];
        var search = sObj['value'];
        var start = dataTablesParameters['start'];
        var length = dataTablesParameters['length'];
        var fieldArray = this.fields;
        var searchField = this.searchOnFields;
        var order = dataTablesParameters['order'];
        var orderBy = this.fields[order[0]['column']];
        var orderDir = order[0]['dir'];
        /*
            Providing 7 Values to every API call
            "search"      for finding paticular record
            "start"       providing from which row need to be displayed on next page
            "length"      total no. of rows to show on every page
            "orderBy"     Column name where shorting is applied
            "orderDir"    asc/desc
            "fieldArray"  list of column that will be used for in data table
            "searchField" list of column on which searcing will be applied
        */
        if (this.link != "") {
          this.http.post(this.link, { search, length, start, orderBy, orderDir, fieldArray, searchField }, {})
            .subscribe(resp => {
              this.details = resp['data'];

              /* Changing Table's body according to the data retrived 
                ie. If no Data retrived (No. of records are 0) then displaying
                    2nd tbody from HTML using *ngIf
              */
              this.flag = this.details['data'].length > 0;

              /* Saving Total No. of records for further use. */
              if (this.flagTotal) {
                this.totalRecords = resp['data']['totalRecords'];
                this.flagTotal = false;
              }

              /*
                  Callback function to display filtered Records.
                  if User search some text it will show how many records found
                  according to the search string.

                  ie. if 2 records found from total 9 records
                  => Showing 1 to 2 of 2 entries (filtered from 9 total entries)
              */
              callback({
                recordsTotal: this.totalRecords,
                recordsFiltered: resp['data']['totalRecords'],
                data: []
              });
            });
        }
    }
}

我想将以下 initComplete 函数转换为用于anguar 8数据表实现的打字稿,我只想对enter(key 13)进行搜索。

var oTable = $('#table-name')。dataTable({处理:true,serverSide:true,ajax:“ file.json”,initComplete:function(){     $('#table-name_filter input')。unbind();     $('#table-name_filter input')。bind('keyup',function(e){if(e.keyCode == 13){oTable.fnFilter(this.value);}}); }

0 个答案:

没有答案