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

【问题标题】：Angular 6 DataTables - how to get current pageAngular 6 DataTables - 如何获取当前页面
【发布时间】：2019-05-08 21:07:05
【问题描述】：

我正在使用 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 调用之前访问页面信息。

【问题讨论】：

如果包含标记会更好
另外你需要使用分页器
这可能会有所帮助，但这是在 AngularJS 中：stackoverflow.com/questions/39161117/…
当您单击页面按钮（示例第 2 页）时，请尝试在方法中传递 $event 并告诉我们您在其中得到了什么。
为什么需要当前页面？ dataTablesParameters中有两个参数，即start和length。如果您想要特定页面的项目（即单击页码），请在后端过滤查询集，例如 queryset[start:start + length] 将完成这项工作。

标签： angular angular6 angular-datatables

【解决方案1】：

使用ajax参数可以得到page 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: []
        });
      });
  },

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

嘿，我正在使用它，但它仍然没有使用 api 发送任何类型的分页、订单等。

【解决方案4】：

我认为你错过了这个...... 长度菜单：[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: []
          });

        });
      },

    };

【讨论】：