Question

我是离子和角度的新手，我试图在离子应用中以表格形式显示具有过滤，排序和分页功能的数据。

在导入以下模块后，我正在使用 ng-table 。

import { Ng2TableModule } from 'ng2-table/ng2-table';

下面是我要显示网格的文件中的html。

<ion-content padding>
  <h3 style="color:399F8B;"> Manage :: Configuration Page</h3>
  <div class="row">
    <div class="col-md-4">
      <input *ngIf="config.filtering" placeholder="Filter all columns" [ngTableFiltering]="config.filtering" class="form-control" (tableChanged)="onChangeTable(config)" />
    </div>
  </div>
  <br>
  <div>
    <ng-table [rows]="rows" [columns]="columns" [config]="config">
    </ng-table>
  </div>
  <pagination *ngIf="config.paging" class="pagination-sm" [(ngModel)]="page" [totalItems]="length" [itemsPerPage]="itemsPerPage" [maxSize]="maxSize" [boundaryLinks]="true" [rotate]="false" (pageChanged)="onChangeTable(config, $event)" (numPages)="numPages = $event">
  </pagination>
  <pre *ngIf="config.paging" class="card card-block card-header">Page: {{page}} / {{numPages}}</pre>
</ion-content>

以下是相应TypeScript文件中的配置和表定义代码。

public config: any = {
    paging: true,
    sorting: { this.columns },
    filtering: { filterString: '' },
    className: ['table-striped', 'table-bordered']
  };



public columns: Array<any> = [
    { title: 'Id', name: 'ID', sort: 'asc' },
    { title: 'Name', name: 'NAME' },
    {title:'Age', name:'AGE'},
    {title:'Comment', name:'COMMENT'},
    {title:'Address', name:'ADDRESS'}
    
  ];

由于现有的代码和html，我能够将表中的记录与底部的分页和表上方的过滤器文本框绑定在一起。但是我无法在单击列标题时对记录进行排序。由于我在线搜索的大多数代码或html仅针对AngularJS，而不针对Ionic框架，因此我无法按原样集成它们。

请让我知道我所缺少的内容，如果需要其他代码，我将其添加

在离子框架的ng表中排序不起作用

0 个答案: