Как отобразить результаты подкачки с помощью идентификатора подкачки, используя ngx-datatable & angular? - PullRequest
Новая
       33

Как отобразить результаты подкачки с помощью идентификатора подкачки, используя ngx-datatable & angular?

14 голосов
/ 21 апреля 2019

Требование

Отображение динамических данных с использованием ngx-datatable и использование подкачки с использованием идентификатора страницы

Описание :

У меня есть динамические данные, где я отображаю их, используя ngx-datatable в угловом формате, и здесь все работает, но проблема, я не уверен, как применить пейджинг с использованием page_id (отправляется на сервер с использованием тела сообщения). Здесь я получаю page_id вместе с ответом API, это первый вызов API. здесь page_id должен быть отправлен как тело для того же API для получения остальных результатов.

Пример: Предположим, у меня есть 20 результатов в первом вызове API. Я получу 10 записей и идентификатор страницы, используя идентификатор страницы, как я могу получить следующие 10 результатов

Что я реализовал:

Получение данных и их отображение в таблице.

Ниже мой код: 

Result=[];
  reorderable: boolean = true;
  selected = [];
  rows = [];
  columns = [];
  DataArray = [];
  Results = {
    "data": [
      {
        "_score": 0.36464313,
        "_type": "data",
        "_id": "abcd",
        "_source": {
          "filter": "data",
          "information": {
            "product_id": "abcd",
            "creation_utctime": "1477335693653"
          },
          "enduser": "free"
        },
        "_index": "dell_laptop"
      },
      {
        "_score": 0.36464314,
        "_type": "data",
        "_id": "abcde",
        "_source": {
          "filter": "data",
          "information": {
            "product_id": "abcde",
            "creation_utctime": "1477335693653"
          },
          "enduser": "free"
        },
        "_index": "lenovo_laptop"
      },
      {
        "_score": 0.36464314,
        "_type": "data",
        "_id": "abcdef",
        "_source": {
          "filter": "data",
          "information": {
            "product_id": "abcde",
            "creation_utctime": "1477335693653"
          },
          "enduser": "free"
        },
        "_index": "lenovo_laptop"
      }
    ],
    "total": 4,
    "page_id": "WpNdVJMMjlJVnJTYTFuUklB"
  }



  LoadInfo(){
    this.DataArray = ["filter","information.product_id","information.creation_utctime","enduser"];
    this.rows=[];
    this.Result = this.Results['data'];
// tslint:disable-next-line: forin
    for (var res in this.Result) {
      var row = {};
      for (var key in this.Result[res]['_source']) {
        if (typeof this.Result[res]['_source'][key] === 'object') {
          for (var k in this.Result[res]['_source'][key]) {
            let temp = key + "." + k;
            row[temp] = this.Result[res]['_source'][key][k];
          }
        } else {
          row[key] = this.Result[res]['_source'][key]
        }
        row['_id'] = this.Result[res]['_id'];
      }
      this.rows.push(row);
    }
    console.log(this.rows);

  }

  onActivate(event) {
    // console.log('Activate Event', event);
  }

  onSelect({ selected }) {
    // console.log('Select Event', selected, this.selected);

    this.selected.splice(0, this.selected.length);
    this.selected.push(...selected);
  }

HTML код: 

<button type="button" (click)="LoadInfo()">LoadData</button>

 <div>
     <ngx-datatable class="material ui" [rows]="rows" [columnMode]="'force'" [headerHeight]="50"
     [footerHeight]="50" [limit]="2" [rowHeight]="'auto'" [reorderable]="reorderable" [selected]="selected"
     [selectionType]="'checkbox'" [scrollbarH]="true" [sortType]="'multi'" (activate)="onActivate($event)"
    (select)='onSelect($event)'>

    <ngx-datatable-column [width]="30" [sortable]="true" [canAutoResize]="false" [draggable]="false"
    [resizeable]="false" class="uih">
    <ng-template ngx-datatable-header-template let-value="value" let-allRowsSelected="allRowsSelected"
      let-selectFn="selectFn">
      <input type="checkbox" [checked]="allRowsSelected" (change)="selectFn(!allRowsSelected)" />
    </ng-template>
    <ng-template ngx-datatable-cell-template let-value="value" let-isSelected="isSelected"
      let-onCheckboxChangeFn="onCheckboxChangeFn">
      <input type="checkbox" [checked]="isSelected" (change)="onCheckboxChangeFn($event)" />
    </ng-template>
  </ngx-datatable-column>
  <ngx-datatable-column *ngFor="let attr of DataArray" [sortable]="true" prop={{attr}} name={{attr}}>
  </ngx-datatable-column>

     </ngx-datatable>
</div>

Stackblitz ссылка: https://stackblitz.com/edit/angular-secw8u

Примечание: даже если есть несколько страниц после 10 записей, может также не быть больше записей

здесь api call является простым почтовым запросом 

api : https://xxxx.xxxx..com/<some method>
 body: { "key1":"data1","key2":"data2","pageid":"ss"}

здесь, в первом вызове API мы не будем отправлять идентификатор страницы, так как после вызова первого вызова API мы получим ответ, что мы получим Pageid, а для второго вызова API я имею в виду пейджинг, тогда мы должны использовать pageid

1 Ответ

2 голосов
/ 15 мая 2019

Для нумерации страниц необходимо знать общее количество страниц. В противном случае вам нужно общее количество элементов вместе с количеством элементов на странице ( для получения общего количества страниц ). В твоем случае у вас есть только идентификатор страницы, который даже не говорит, на какой странице вы находитесь. Идентификатор страницы только дает вам доступ к элементам следующей страницы.

Этот API полезен, если вы реализуете функцию бесконечной прокрутки. В противном случае вы можете только реализовать кнопку more , в которую загружаются новые элементы в таблицу. ссылка Вы предоставили в комментариях реализует эту функцию больше кнопки.

Таким образом, вы можете переопределить нижний колонтитул по умолчанию ngx-datatable, чтобы добавить дополнительную кнопку для загрузки больше предметов к столу. 

<ngx-datatable-footer>
    <ng-template ngx-datatable-footer-template
        let-rowCount="rowCount"
        let-pageSize="pageSize"
        let-selectedCount="selectedCount"
        let-curPage="curPage"
        let-offset="offset"
        let-isVisible="isVisible">

        <div class="datatable-footer-inner selected-count">
            <div class="page-count" *ngIf="selectedCount">
                <span> {{selectedCount}} selected / </span> {{rowCount}} total
            </div>
            <div class="datatable-pager">
                <ul class="pager">
                    <li class="pages active" role="button" aria-label="next" *ngIf="rowCount">
                        <a href="javascript:void(0)" (click)="LoadInfo()"> Next </a>
                    </li>
                </ul>
            </div>
        </div>

    </ng-template>
</ngx-datatable-footer>

Демонстрация Stackblitz

...