Question

我正在使用Angular数据表（https://l-lin.github.io/angular-datatables/#/welcome）创建一个Angular 6应用程序。这是我的组件代码：

import { Component, OnInit, ViewChild } from '@angular/core';
import { HttpClient, HttpResponse } from '@angular/common/http';
import { DataTableDirective } from 'angular-datatables';

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

export class MainmenuComponent implements OnInit {
  @ViewChild(DataTableDirective)
  datatableElement: DataTableDirective;
  dtOptions: DataTables.Settings = {};
  learningPaths: LearningPath[];

  constructor(private http: HttpClient) { }

   ngOnInit(): void {
    const that = this;

    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 10,
      serverSide: true,
      processing: true,
      ajax: (dataTablesParameters: any, callback) => {
        that.http
          .post<DataTablesResponse>(
            'http://localhost:4154/api/LP?p=1'
            ,
            dataTablesParameters, {}
          ).subscribe(resp => {
            that.learningPaths = resp.data;

            callback({
              recordsTotal: resp.recordsTotal,
              recordsFiltered: resp.recordsFiltered,
              data: []
            });
          });
      },
      columns: [{ data: 'icon', orderable: false }, { data: 'name' }, { data: 'description' }],
      order: [[ 1, "asc" ]]
    };
  }
}

我希望能够将当前页面索引传递给服务器端api。谁能指出我正确的方向？我能够像这样显示当前页面索引：

{{ (datatableElement.dtInstance | async)?.table().page.info().page }}

但我不知道如何在进行ajax调用之前访问页面信息。

Answer 1

在dataTablesParameters中传递的值不包括当前页面。您可以根据传递的参数使用(start + length) + 1进行计算。希望这会有所帮助！

Answer 2

我只是错过了这个。订单，方向，页面大小等所有属性都是在一个正文中发送的（dataTablesParameters变量）：

ajax: (dataTablesParameters: any, callback) => {

Answer 3

我认为您错过了这个... lengthMenu：[10，20，50，100]，

 this.dtOptions1 = {
      // Configure the buttons
      pagingType: 'full_numbers',
      pageLength: 10,
      serverSide: true,
      processing: true,
      language: {
        searchPlaceholder: "Search Table Elements"
      },
      lengthMenu: [10, 20, 50, 100],
      //  lengthChange: false,
      ajax: (dataTablesParameters: any, callback) => {

        this.UIS.getUI_Settings_ajax(dataTablesParameters).subscribe(resp => {
          let filteredData = []; 
          let i=1;
          resp.data.forEach(element => {
            element['options'] = '-';
            element['sno'] = i++;
            filteredData.push(element)
          });
           this.tableData = filteredData
          //  this.tabaleData = filteredData

          callback({
            recordsTotal: this.tableData.length,
            recordsFiltered: resp.tot_count,
            data: []
          });

        });
      },

    };

Answer 4

您可以使用ajax参数获取第no页，请看下面的代码，您将会有所了解。

ajax: (dataTablesParameters: any, callback) => {
    const page = parseInt(dataTablesParameters.start) / parseInt(dataTablesParameters.length) + 1;
    const rowData = {
      no_of_records: dataTablesParameters.length,
      page: page,
      group_id: 1
    };
    that.http
      .post<DataTablesResponse>(
        'http://localhost:3030/role/list',
        rowData, {}
      ).subscribe(resp => {
        console.log(resp);
        that.persons = resp.data;

        callback({
          recordsTotal: 10,
          recordsFiltered: 20,
          data: []
        });
      });
  },

Angular 6 DataTables - 如何获取当前页面

4 个答案: