asked on

Help using Angular2 datatable library

Hello there,

I am using Angular2 datatable in a project to display tables with paginations.

Here is the link to the library https://github.com/mariuszfoltak/angular2-datatable.

Can somebody please clear some doubts I have with regards to the #mf="mfDataTable"? The developer has used in his demo and using the mf.data to refer to the data.But when I use that mf., my table does not get populated but when I use it without that .mf,my data is loaded in the tables.

So, do I need that #mf="mfDataTable" or what am I missing?

Below is my code.

<table class="table table-striped table-hover" [mfData]="products" #mf="mfDataTable" [mfRowsOnPage]="5">
                <thead>
                    <tr>
                        <th>
                            <mfDefaultSorter by="gtin">GTIN</mfDefaultSorter>
                        </th>
                        <th>
                            <mfDefaultSorter by="fdoname_en">Name Eng</mfDefaultSorter>
                        </th>
                        <th class="no-sort hidden-sm-down">
                            <mfDefaultSorter by="fdoname_fa">Name Per</mfDefaultSorter>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let product of products | SearchPipe : searchText">
                        <td><a [routerLink]="['/app/master/products',product.gtin]">{{product.gtin}}</a></td>
                        <td>{{product.fdoname_en}}</td>
                        <td>{{product.fdoname_fa}}</td>
                        <td>
                            <a class="btn btn-primary" [routerLink]="['/app/master/productEdit', product.gtin]">
                                Edit
                            </a>
                        </td>
                    </tr>
                    <tr *ngIf="!products.length">
                        <td>&nbsp;</td>
                        <td colspan="6">No Records Found</td>
                    </tr>
                    <tr *ngIf="(products | SearchPipe : searchText).length === 0">
                        <td>&nbsp;</td>
                        <td colspan="6">No matches</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="12">
                            <mfBootstrapPaginator [rowsOnPageSet]="[5, 10, 25]"></mfBootstrapPaginator>
                        </td>
                    </tr>
                </tfoot>
            </table>

Open in new window

cheers!!

Julian Hansen

Can we see your Angular code for where you load products.

Zolf

ASKER

@Component({
  templateUrl: 'product-list.component.html',
  styleUrls: [ './dynamic.style.scss' ],
  encapsulation: ViewEncapsulation.None
})
export class ProductComponent  implements OnInit {

  title: string;
  products: IProduct[] = [];
 

  constructor(private router: Router, 
              private productDataService: ProductService) { }
  
  ngOnInit() {
    this.title = 'Products';
    this.getProducts();
  }

  getProducts() {
    console.log('getProducts() retrieved products');
    this.productDataService.getProducts().subscribe((products: IProduct[]) =>{
        this.products  = products;
    }),
    (err:any) => console.log(err),
    () => console.log('getProductsssss() retrieved products');

  }
}

Open in new window

Zolf

ASKER

Please help!!

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Julian Hansen