Кнопка «Далее» и кнопка «Назад» из datatable-пейджера не работают - PullRequest
Новая
       10

Кнопка «Далее» и кнопка «Назад» из datatable-пейджера не работают

0 голосов
/ 14 ноября 2018

Я реализую один ngx-datatable в своем проекте и создаю собственный нижний колонтитул для этой таблицы, но следующая кнопка и изображение кнопки «Назад» для изменения страницы из таблицы не отображаются в нижнем колонтитуле.

Прежде всего: следуйте изображению ниже, чтобы увидеть, что изображение кнопки «Вперед» и «Назад» не появляется

follow image here

В нижнем колонтитуле я установилИзображение как пример ниже: 

<datatable-pager
  [pagerLeftArrowIcon]="'datatable-icon-left'"
  [pagerRightArrowIcon]="'datatable-icon-right'"
  [pagerPreviousIcon]="'datatable-icon-prev'"
  [pagerNextIcon]="'datatable-icon-skip'"
  [page]="curPage"
  [size]="pageSize"
  [count]="rowCount"
  [hidden]="!((rowCount / pageSize) > 1)"
  (change)="table.onFooterPage($event)">
</datatable-pager>

Посмотрите, что я использую значки 

datatable-icon-left, datatable-icon-right, datatable-icon-prev and datatable-icon-skip

Этот значок доступен в моем проекте по следующему пути src / scss / partials / ngx-scss / table.scss.

посмотрите приведенный ниже код, представляющий стиль нижнего колонтитула: 

.datatable-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  font-size: 16px;
  .page-count {
    line-height: 50px;
    height: 50px;
    padding: 0 1.2rem;
  }
  .datatable-pager {
    margin: 0 10px;
    li {
      vertical-align: middle;
      &.disabled a {
      color: rgba(0, 0, 0, 0.26) !important;
      background-color: transparent !important;
    }
    &.active a {
     background-color: $color-blue;
     color: #fff;
    }
  }
  a {
   padding: 0 6px;
   border-radius: 3px;
   margin: 6px 3px;
   text-align: center;
   vertical-align: top;
   color: rgba(0, 0, 0, 0.54);
   text-decoration: none;
   vertical-align: bottom;
   &:hover {
     color: rgba(0, 0, 0, 0.75);
     background-color: rgba(158, 158, 158, 0.2);
   }
 }
  .datatable-icon-left, .datatable-icon-skip, .datatable-icon-right, 
  .datatable-icon-prev {
     font-size: 20px;
    line-height: 20px;
    padding: 0 3px;
  }
 }
}

.datatable-icon-right:before {
  content: "\eb27";
  font-family: 'icofont';
  font-style: normal;
 }

 .datatable-icon-skip:before {
   content: "\eb3a";
   font-family: 'icofont';
   font-style: normal;
}

 .datatable-icon-left:before {
   content: "\eb26";
   font-family: 'icofont';
   font-style: normal;
 }

 .datatable-icon-down:before {
   content: "\eb28";
   font-family: 'icofont';
   font-style: normal;
 }

 .datatable-icon-prev:before {
   content: "\eb39";
   font-family: 'icofont';
   font-style: normal;
 }

Следуйте моему коду.

Честно говоря, я не знаю, почемуно изображение не появляется.Поэтому я хотел бы за вашу помощь в этой проблеме.

Следуйте всем моим кодам для лучшего понимания:

html: 

 <ngx-datatable
      class="material"
      [rows]="deviceList"
      [columnMode]="'force'"
      [headerHeight]="50"
      [footerHeight]="50"
      [rowHeight]="'auto'"
      [limit]="rowLimit">

      <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="footer-page-size-position">
              show
            </div>
            <div class="footer-page-size-position">
              <mat-select style="text-align: center" class="mat-select-position" [(value)]="rowLimit" (selectionChange)="changeRowLimits($event.value)">
                <mat-option  *ngFor="let limit of LIMITS" [value]="limit.value">
                  {{limit.value}}
                </mat-option>
              </mat-select>
            </div>
            <div class="footer-page-size-position">
                entries
            </div>

            <datatable-pager
              [pagerLeftArrowIcon]="'datatable-icon-left'"
              [pagerRightArrowIcon]="'datatable-icon-right'"
              [pagerPreviousIcon]="'datatable-icon-prev'"
              [pagerNextIcon]="'datatable-icon-skip'"
              [page]="curPage"
              [size]="pageSize"
              [count]="rowCount"
              [hidden]="!((rowCount / pageSize) > 1)"
              (change)="table.onFooterPage($event)">
            </datatable-pager>

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

      <ngx-datatable-column name="Photo" [width]="10">
        <ng-template let-rowIndex="rowIndex" let-rowsClient="row" ngx-datatable-cell-template>
            <img src="assets/images/widget/PHONE1.jpg" alt="" class="img-fluid">
        </ng-template>
      </ngx-datatable-column>

      <ngx-datatable-column name="Product Name">
        <ng-template let-rowIndex="rowIndex" let-deviceList="row" ngx-datatable-cell-template>
          {{deviceList.model}}
        </ng-template>
      </ngx-datatable-column>

      <ngx-datatable-column name="Barcode">
        <ng-template let-rowIndex="rowIndex" let-deviceList="row" ngx-datatable-cell-template>
          {{deviceList.barcode}}
        </ng-template>
      </ngx-datatable-column>

      <ngx-datatable-column name="IMEI"> 
        <ng-template let-rowIndex="rowIndex" let-tardisDevices="row" ngx-datatable-cell-template>
          {{deviceList.imei}}
        </ng-template>
      </ngx-datatable-column>

      <ngx-datatable-column name="SKU">
        <ng-template let-rowIndex="rowIndex" let-deviceList="row" ngx-datatable-cell-template>
          {{deviceList.carrier}}
        </ng-template>
      </ngx-datatable-column>

      <ngx-datatable-column name="HW Revision"> 
        <ng-template let-rowIndex="rowIndex" let-deviceList="row" ngx-datatable-cell-template>
          {{deviceList.hw}}
        </ng-template>
      </ngx-datatable-column>

      <ngx-datatable-column name="Usage Status">
        <ng-template let-rowIndex="rowIndex" let-deviceList="row" ngx-datatable-cell-template> {{deviceList.deviceStatus}}</label>
        </ng-template>
      </ngx-datatable-column>
    </ngx-datatable>

file.ts 

import { Component, OnInit, ViewChild} from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

import { DeviceService } from 
'../../../shared/services/device/device.service.js';
import { Device } from '../../../shared/models/device.model';
import { DatatableComponent } from '@swimlane/ngx-datatable';

 @Component({
 selector: 'app-tardis-home',
 templateUrl: './list-devices-.component.html',
 providers: [DeviceService],
 styleUrls: ['./list-devices.component.scss']
})
export class ListDevicesComponent implements OnInit {

   public listDevices: Device[];
   public temp: Device [];
   public rowLimit: number;

   @ViewChild(DatatableComponent) table: DatatableComponent;

   constructor(private httpClient: HttpClient, private deviceService: 
   DeviceService) { }

   LIMITS = [
    {value: 10 },
    {value: 25 },
    {value: 50 },
    {value: 100 },
    {value: 500 }
   ];

   public ngOnInit() {

    // start table row limit with 10
    this.rowLimit = 10;

    // load last used devices data
    this.deviceService.getAllDevices().subscribe(((listDevices: Device[]) => {
     this.listDevices= listDevices;
     this.temp = listDevices;
     console.log(this.listDevices);
    }));
}

1 Ответ

0 голосов
/ 14 ноября 2018

Я нахожу решение для моей проблемы.

по какой-то причине таблица table.css, используемая компонентом ngx-datatable, имеет неправильный хеш-значок. Поэтому я удалил весь значок содержимого в коде ниже. 

.datatable-icon-right:before {
   content: "\eb27";  <!-- REMOVE THIS -->
   font-family: 'icofont';
   font-style: normal;
}

.datatable-icon-skip:before {
   content: "\eb3a";  <!-- REMOVE THIS -->
   font-family: 'icofont';
   font-style: normal;
}

.datatable-icon-left:before {
   content: "\eb26";   <!-- REMOVE THIS -->
   font-family: 'icofont';
   font-style: normal;
}

.datatable-icon-down:before {
  content: "\eb28";   <!-- REMOVE THIS -->
  font-family: 'icofont';
  font-style: normal;
}

.datatable-icon-prev:before {
  content: "\eb39";  <!-- REMOVE THIS -->
  font-family: 'icofont';
  font-style: normal;
}

Итак, код делает это так: 

.datatable-icon-right:before {
  font-family: 'icofont';
  font-style: normal;
}

.datatable-icon-skip:before {
  font-family: 'icofont';
  font-style: normal;
}

.datatable-icon-left:before {
  font-family: 'icofont';
  font-style: normal;
}
...