dataTable参数在角度6中不起作用 [英] dataTable parameters not working in angular 6

问题描述

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

I am using dataTables in angular 6 the is coming fine and displaying it perfectly as expected. but if i click on pagination or changed the page length or search anything it doesn't send any parameter with api like it does in jquery dataTable here is my code

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'}
      // ],
    };



  }

}

当我检查检查元素

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

我从过去三天开始一直在搜索它，但是什么也没发现.

I am googling it from last three days but found nothing.

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

The above image is of my tables pagination displaying perfectly data coming fine but the functionality is not working. Everytime i click on pagination or changed the length the api hit but without any parameters

推荐答案

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

Well i have made some changes and yes my code is working now. It is passing parameter with url. Below is my updated code, i have replaced http.get with http.post and also made some changes for 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: []
          });
        });
      },

    };

  }


}

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

Now i can see in network section all the parameters i want to send

{"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中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！