Angular 5:Datatable服务器端分页

时间:2018-06-26 11:42:45

标签: ajax angular datatable pagination server-side

我正在使用与链接相同的服务器端分页:https://l-lin.github.io/angular-datatables/#/basic/server-side-angular-way  我从控制器那里获取数据的位置:http://localhost:63002/api/store/getallstoresales

我想每页显示2行,但是它正在显示所有数据库行(而不是每页2行)

下面是我的代码:

import { Component, OnInit,AfterViewInit, Input, EventEmitter, Output, ViewChild,OnDestroy, ChangeDetectorRef  } from '@angular/core';
import { DataTableDirective } from 'angular-datatables';
import { Subject } from 'rxjs';
import { AbstractService } from './abstractservice';
import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http';
import { StoreModel } from '../models/StoreModel';

class Person {
  strName: string;
  strAddress: string;
  strTelephone: number;
  strSalesMonthly: number;
  strSalesDaily: number;
}

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

@Component({
  selector: 'store',
  templateUrl: './store.component.html',
  styleUrls: ['./store.component.css']
})

export class StoreComponent implements OnInit , AfterViewInit, OnDestroy {
  private selectUndefinedOptionValue:any;
    persons:Person[];
    dtOptions: DataTables.Settings = {};
    @ViewChild(DataTableDirective)
    datatableElement: DataTableDirective;

    nAddress:string;
    lArr = [];
    units: string[] = [];
     recordsTotal:number;
     recordsFiltered: number;

  saveData = [];
  constructor(private http:HttpClient,private service: AbstractService, private chRef: ChangeDetectorRef) {  }
  ngOnInit(): void {

    var that=this;
    this.dtOptions = {
      ordering: false,
      searching:true,        
      pagingType: 'full_numbers',
      pageLength: 2,
      serverSide: true,
      processing: true,
      dom: 'tpi' ,
      ajax: (dataTablesParameters: any, callback) => {
        that.http
        .post<DataTablesResponse>(
            'http://localhost:63002/api/store/getallstoresales',
             dataTablesParameters, {}
          ).subscribe(resp => {
            that.persons = resp.data;
           callback({                
                recordsTotal: resp.recordsTotal,
                recordsFiltered: resp.recordsFiltered,
                data: []
            });
          });
      },
      columns: [{
        data: 'strName'
      }, {
        data: 'strAddress'
      }, {
        data: 'strTelephone'
      },{
        data: 'strSalesMonthly'
      },{
        data: 'strSalesDaily'
      }
    ] 
    };

}
}

有人可以告诉我哪里出了问题吗?或者是否缺少某些东西?

0 个答案:

没有答案