Question

我使用Angular 5和datatables 1.10.12

我有简单的路线配置：

 export const appRoutes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: '',
    component: AppLayoutComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: '',
        component: HomeComponent
      },
      {
        path: 'documentlist',
        component: DocumentlistComponent,
        canActivate: [AuthGuardEcm]
      },
      {
        path: 'home',
        component: HomeComponent
      },
    ]
  }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

HomeComponent组件使用jQuery插件显示数据：DataTables

import { Component, OnInit, AfterViewInit } from '@angular/core';

declare interface DataTable {
  headerRow: string[];
  footerRow: string[];
  dataRows: string[][];
}

declare const $: any;

@Component({
  selector: 'app-data-table-cmp',
  templateUrl: 'home.component.html'
})

export class HomeComponent implements OnInit, AfterViewInit {
  public dataTable: DataTable;

  ngOnInit() {
    console.log('Home - ngOnInit');
    this.dataTable = {
      headerRow: [ 'Nom', 'Position', 'Office', 'Age', 'Date', 'Actions' ],
      footerRow: [ 'Nom', 'Position', 'Office', 'Age', 'Start Date', 'Actions' ],

      dataRows: [
        ['Airi Satou', 'Andrew Mike', 'Develop', '2013', '99,225', ''],
        ['Angelica Ramos', 'John Doe', 'Design', '2012', '89,241', 'btn-round'],
        ['Ashton Cox', 'Alex Mike', 'Design', '2010', '92,144', 'btn-simple'],
        ['Bradley Greer', 'Mike Monday', 'Marketing', '2013', '49,990', 'btn-round'],
        ['Caesar Vance', 'Mike Monday', 'Marketing', '2013', '49,990', 'btn-round'],
        ['Cedric Kelly', 'Mike Monday', 'Marketing', '2013', '49,990', 'btn-round'],
        ['Charde Marshall', 'Mike Monday', 'Marketing', '2013', '49,990', 'btn-round'],
 etc...

      ]
    };

  }

  ngAfterViewInit() {
    console.log('Home - ngAfterViewInit');
    $('#datatables').DataTable({
      pagingType: 'full_numbers',
      lengthMenu: [[10, 25, 50, -1], [10, 25, 50, 'All']],
      responsive: true,
      language: {
        lengthMenu: 'Afficher _MENU_ enregistrements par page',
        zeroRecords: 'Aucun enregistrement trouvé',
        info: 'Page _PAGE_ sur _PAGES_',
        infoEmpty: 'Aucun enre disponible',
        infoFiltered: '(filtré(s) sur _MAX_ enregistrements)',
        paginate: {
          first:      'Premier',
          last:       'dernier',
          next:       'Suivant',
          previous:   'Precedent'
        },
        search: '_INPUT_',
        searchPlaceholder: 'Recherche',
      }

    });

    const table = $('#datatables').DataTable();

  }
}

登录后，表格出现但没有搜索栏，排序不起作用......

但如果我点击另一个链接（例如“Documents”），然后点击主菜单“Accueil”，它就可以了：

我在控制台中没有错误... 我该如何解决这个问题？

Answer 1

我知道，这不是您一直要求的解决方案，但是使用Angular Data Tables可能会为您带来更好的结果。我这样说，因为我尽量避免使用jQuery。虽然它本身并不总是可行，但是一些流行的插件只适用于jQuery，但是现在有很好的替代品已经很好地开发了。

https://github.com/ggmod/angular-5-data-table数据表
https://github.com/ghiscoding/Angular-Slickgrid Slickgrid

Angular 5 - 加载DataTables

1 个答案: