Myujth

I'm implementing one ngx-datatable in my project and I'm doing a custom footer for this table, but the next button and back button image to change page from table does not appear in footer.

First of all: follow image below for you see that the next and back button image does not appear

In the footer I'm set the image as example below:

<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>

Look that I'm using the icons

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

This icon is available in my project in the follow path src/scss/partials/ngx-scss/table.scss.

look the code below that represent the datatable-footer style:

.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;
 

Follow my code.

I honestly do not know why the buton image not appear. So I would like for your help in this problem.

Follow my all code for better understanding:

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);
 ));

I find the solution for my problem.

for some reason the table.css used by ngx-datatable component has wrong icon hash.
So I removed all content icon in code below.

.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;

So the code make it like this:

.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;