Question

我在角度6中使用dataTables时效果很好，并按预期完美显示。但是如果我单击pagination或更改页面长度或搜索任何内容，它将不会像jQuery dataTable中那样发送带有api的任何参数这是我的代码

component.ts文件

import { Component, OnInit } from '@angular/core';
import { adminLteConf } from '../admin-lte.conf';
import {Http} from "@angular/http";
import { HttpClient, HttpResponse } from '@angular/common/http';

import { HttpHeaders } from '@angular/common/http';
import { DataTableDirective } from 'angular-datatables';

@Component({
  selector: 'app-listmasterlog',
  templateUrl: './listmasterproducts.component.html',
  styleUrls: ['./listmasterproducts.component.css']
})
export class ListmasterproductsComponent implements OnInit {

  public data: any[];
  public filterQuery = "";
  public mfRowsOnPage = 10;
  public mfActivePage: any;
  public sortOrder = "asc";

  dtOptions: DataTables.Settings = {}; 
  metaData:any;


  constructor(private http: Http) { }

  ngOnInit(): void {
    this.dtOptions = {
      //pagingType: 'full_numbers',

      processing: true,
      serverSide: true,

      pageLength:10,
      language: {
        lengthMenu: "_MENU_",
        paginate: {
          first:'',
          last:'',
          next: '<i class="fa fa-chevron-circle-right">', // or '→'
          previous: '<i class="fa fa-chevron-circle-left">' // or '←' 
        }
      },
      dom: '<t><"bottom"p><"inline-flex" li><"clear">',
      ajax:(dataTablesParameters:any, callback) => {
        this.http.get(
          adminLteConf.APIURL+"?io=masterprod&action=list",
          dataTablesParameters
        ).subscribe(resp=> {
          var resposnse = resp.json();
          this.data = resposnse['data'];
          //console.log(this.packages);

          callback({
            recordsTotal: resposnse['meta'].total,
            recordsFiltered: resposnse['meta'].pages,
            data: []
          });
        });
      }
      // columns: [
      //   { data: "RecordId"}, {data: 'PackageName'}, {data: 'Price'}
      // ],
    };



  }

}

这是我检查检查元素内的network部分时获得的标题

http://example.com/webapi/?io=masterprod&action=list&value=&regex=false

我从过去三天开始一直在搜索它，但一无所获。

上面的图像是我的表分页，显示数据很好，但功能无法正常工作。每次我单击分页或更改api命中的长度但没有任何参数

Answer 1

将您的脚本和样式添加到 angular.json 文件

Answer 2

好吧，我进行了一些更改，是的，我的代码正在运行。它正在通过url传递参数。以下是我更新的代码，我将http.get替换为http.post，并对header

进行了一些更改

import { Component, OnDestroy, OnInit, ViewChild, AfterViewInit } from 

'@angular/core';
import { adminLteConf } from '../admin-lte.conf';
import {Http, RequestOptions, Headers} from "@angular/http";
import { HttpClient, HttpResponse, HttpHeaders } from '@angular/common/http';


import { DataTableDirective } from 'angular-datatables';

class DataTablesResponse {
  data: any[];
  draw: number;
  recordsFiltered: number;
  recordsTotal: number;
}


const ParseHeaders = {
  headers: new HttpHeaders({
   'Content-Type'  : 'application/x-www-form-urlencoded'
  })
 };


@Component({
  selector: 'app-listmasterlog',
  templateUrl: './listmasterproducts.component.html',
  styleUrls: ['./listmasterproducts.component.css']
})
export class ListmasterproductsComponent implements OnInit {
  @ViewChild(DataTableDirective)
  datatableElement: DataTableDirective;



  public masterprods: any[];
  public filterQuery = "";
  public mfRowsOnPage = 10;
  public mfActivePage: any;
  public sortOrder = "asc";
  public page :number;
  data : any[];
  dtOptions: DataTables.Settings = {}; 


  constructor(private http: HttpClient) { }

  ngOnInit(): void {

    this.dtOptions = {
      processing: true,
      serverSide: true,
      destroy:true,
      paging:true,
      ordering:true,
      //displayStart:2,
      pageLength:10,
      searchDelay: 2000,
      lengthChange:true,
      language: {
        lengthMenu: "_MENU_",
        paginate: {
          first:'',
          last:'',
          next: '<i class="fa fa-chevron-circle-right">', // or '→'
          previous: '<i class="fa fa-chevron-circle-left">' // or '←' 
        }
      },
      dom: '<t><"bottom"p><"inline-flex" li><"clear">',
      ajax:(dataTablesParameters:any, callback) => {

        this.http.post<DataTablesResponse>(
          "http://example.com/io=pro&action=lst",
          dataTablesParameters,ParseHeaders
        ).subscribe(resp=> {
          var resposnse = JSON.stringify(resp);
          var respsn = JSON.parse(resposnse);

          this.masterprods = respsn.data;

          callback({
            recordsTotal: respsn.meta['total'],
            recordsFiltered: respsn.meta['pages'],
            data: []
          });
        });
      },

    };

  }


}

现在我可以在网络部分看到我要发送的所有参数

{"draw":1,"columns":[{"data":0,"name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":1,"name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":2,"name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":3,"name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":4,"name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":5,"name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":6,"name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":7,"name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}}],"order":[{"column":0,"dir":"asc"}],"start":0,"length":10,"search":{"value":"","regex":false}}

dataTable参数在角度6中不起作用

2 个答案: