angular2 table 可排序 可翻页

前端之家收集整理的这篇文章主要介绍了angular2 table 可排序 可翻页前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
  1. export class RComponent implements OnInit {
  2.  
  3. data: any;
  4.  
  5. ngOnInit() {
  6. this.data = require('../data/hengxiangduibi.json');
  7. }
  8.  
  9. rows: any[] = [
  10. {
  11. Name: 'Data 1',Amount: 100.23,Date: 1477545980000
  12. },{
  13. Name: 'Data 2',Amount: 0.875623,Date: 1477545989000
  14. },{
  15. Name: 'Data 3',Amount: .010123,{
  16. Name: 'Data 4',Amount: 1873.02301,{
  17. Name: 'Data 5',Amount: -93,Date: 1477545983000
  18. },{
  19. Name: 'Data 1',Date: 1477545983000
  20. }
  21. ];
  22. columns: any[] = [
  23. {
  24. display: 'Column 1',//The text to display
  25. variable: 'Name',//The name of the key that's apart of the data array
  26. filter: 'text' //The type data type of the column (number,text,date,etc.)
  27. },{
  28. display: 'Column 2',//The text to display
  29. variable: 'Amount',//The name of the key that's apart of the data array
  30. filter: 'decimal : 1.0-2' //The type data type of the column (number,{
  31. display: 'Column 3',//The text to display
  32. variable: 'Date',//The name of the key that's apart of the data array
  33. filter: 'dateTime' //The type data type of the column (number,etc.)
  34. }
  35. ];
  36. sorting: any = {
  37. column: 'Name',//to match the variable of one of the columns
  38. descending: false
  39. };
  40.  
  41. }
  1. <table-sortable
  2. [columns]="columns"
  3. [data]="rows"
  4. [sort]="sorting">
  5. Loading table...
  6. </table-sortable>

效果

还有小瑕疵,不影响使用

猜你在找的Angularjs相关文章