Angular 6 DataTables – как получить текущую страницу

Я создаю приложение Angular 6 с таблицами данных Angular (https://l-lin.github.io/angular-datatables/#/welcome). Это мой код компонента:

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.


angular angular6 angular-datatables
person Krzysztof Kaźmierczak    schedule 14.06.2018    source источник
comment
Было бы намного лучше, если бы вы включили разметку   -  person Antoniossss    schedule 14.06.2018
comment
Также вам нужно использовать paginator   -  person Antoniossss    schedule 14.06.2018
comment
Может быть, это может помочь, но это в AngularJS: stackoverflow.com/questions/39161117/   -  person Aayushi Jain    schedule 15.06.2018
comment
Также попробуйте передать $event в методе, когда вы нажимаете кнопку страницы (пример страницы № 2), и расскажите нам, что у вас есть.   -  person Aayushi Jain    schedule 15.06.2018
comment
зачем вам текущая страница? в dataTablesParameters есть два параметра, т.е. start и length. Если вам нужны элементы конкретной страницы (т.е. вы щелкаете по номеру страницы), на бэкэнде отфильтруйте набор запросов, например queryset[start:start + length], выполнит эту работу.   -  person suhailvs    schedule 30.08.2018
comment
эй @Antoniossss, не могли бы вы уточнить это подробнее, так как я использую dataTable и хочу, чтобы все его функции я использовал в angular 6   -  person Jayant Singh    schedule 09.09.2018
comment
я получаю эту ошибку, если я использовал <DataTablesResponse> [ts] Cannot find name 'DataTablesResponse'. [ts] Expected 0 type arguments, but got 1.   -  person Jayant Singh    schedule 09.09.2018

Ответы (4)


arrow_upward
2
arrow_downward

вы можете получить номер страницы, используя параметры ajax, посмотрите на приведенный ниже код, и вы получите представление.

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: []
        });
      });
  },
person Kiran Ghuge    schedule 08.05.2019

arrow_upward
1
arrow_downward

Значения, переданные в dataTablesParameters, не включают текущую страницу. Вы можете рассчитать это, используя (start + length) + 1 из переданных параметров. Надеюсь это поможет!

person Chinemere Okereke    schedule 30.07.2018

arrow_upward
0
arrow_downward

Я просто пропустил это. Все свойства, такие как порядок, направление, размер страницы и т. д., отправляются с сообщением в теле (переменная dataTablesParameters):

ajax: (dataTablesParameters: any, callback) => {
person Krzysztof Kaźmierczak    schedule 15.06.2018
comment
Эй, я использую это, но он по-прежнему не отправляет какую-либо разбивку на страницы, порядок и т. Д. С API. - person Jayant Singh; 09.09.2018

arrow_upward
0
arrow_downward

Я думаю, вам не хватает этого... 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: []
          });

        });
      },

    };
person ram    schedule 27.09.2018