Настройка таблиц данных с разбитыми на страницы результатами

Может ли кто-нибудь предложить, как настроить таблицы данных с разбитыми на страницы результатами?

Например :

Постраничные результаты моего бэкэнд API:

{
  "total": 50,
  "per_page": 15,
  "current_page": 1,
  "last_page": 4,
  "next_page_url": "http://domain.app?page=2",
  "prev_page_url": null,
  "from": 1,
  "to": 15,
  "data":[
        {
            // Result Object
        },
        {
            // Result Object
        }
  ]
}

В настоящее время я использую ng2-smart-table с angular 6.

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


angular datatables angular6 ng2-smart-table angular-datatables
person Fahim Uddin    schedule 08.08.2018    source источник
comment
Я использую ng2-smart-Table, не могли бы вы немного подробнее объяснить проблему?   -  person Abel Valdez    schedule 08.08.2018
comment
@AbelValdez Вы используете API для создания данных в ng2-smart-table? если да, можете ли вы сказать мне, что ваш API отвечает, сколько результатов в одном запросе?   -  person Fahim Uddin    schedule 08.08.2018
comment
хорошо, я могу опубликовать, как я получаю информацию из БД   -  person Abel Valdez    schedule 08.08.2018

Ответы (2)


arrow_upward
0
arrow_downward

Это моя конфигурация ng2-smart-table, надеюсь, она вам поможет.

HTML

<ng2-smart-table [settings]="settings" [source]="alerts"></ng2-smart-table>

Компонент ts

Конфигурация:

alerts: LocalDataSource;

 settings = {
    columns: {
      tester: {
        title: 'Tester'
      },
      part_number: {
        title: 'Part Number',
      },
    editable: false,
    actions:{
      add: false,
      edit: false,
      delete: false
    }
  };

Реализация

ngOnInit() { 
    this.alerts= new LocalDataSource([]); 
    this.alertService.getAlertsObservable().subscribe(res =>{
      this.alerts.load(res); 
    }); 
}
person Abel Valdez    schedule 08.08.2018
comment
Можете ли вы показать свою структуру данных? которые заполняются в этой таблице? - person Fahim Uddin; 08.08.2018
comment
метод load делает это за вас. Вам не нужно заполнять или повторять информацию, взгляните на alerts: LocalDataSource;, это класс ng2-smart-table, и они должны заполнить информацию. - person Abel Valdez; 08.08.2018
comment
Чувак, ты не понял, пожалуйста, прочитай мой вопрос еще раз, тема связана с результатами данных API, нам нужно рассмотреть, как наши данные поступают в каком формате, а затем как мы заполняем данные в таблицу. - person Fahim Uddin; 08.08.2018

arrow_upward
0
arrow_downward

Если вы прочитаете эту тему, я думаю, вы найдете решение. https://github.com/akveo/ng2-smart-table/issues/576 Вот краткая информация из темы

this.source = new ServerDataSource(http, {
  endPoint: this.url,
  pagerLimitKey:"_limit",
  pagerPageKey:"_page",
  sortDirKey: "_order",
  sortFieldKey: "_sort",
  dataKey:'data',
  totalKey:'total_count'
});

данные возвращены с сервера:

{
  data: [
    { "id": 1, "value": "A" },
    { "id": 2, "value": "B" },
    ...
  ],
  total_count: 10000
}

total_count будет использоваться для подсчета количества страниц.

В качестве альтернативы я решил эту проблему с помощью LocalDataSource следующим образом: -smart-table с пейджингом из серверной части (Spring)

person boyukbas    schedule 10.04.2019