Question

我在角度2中有一个简单的应用程序。我想在分页表中显示数据。我发现this example非常好，我想在我的应用中使用。

示例的html位于home.component.html，
示例的css位于index.html的脚本中，如：

    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.2/css/select.dataTables.min.css">

我想知道我应该在哪里放置java脚本代码才能工作。我试图放入index.html和home.compose.html，但没有一个能正常使用。

请告诉我java脚本代码应该去哪里。谢谢。这是javascript：

$(document).ready(function() {
    $('#example').DataTable( {
        columnDefs: [ {
            orderable: false,
            className: 'select-checkbox',
            targets:   0
        } ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        order: [[ 1, 'asc' ]]
    } );
} );

Answer 1

如果你已经在Html页面中引用了Jquery而不需要在component.ts文件中导入它。请参阅下面的代码，它对我来说很好。

$ ./main 
Hello, my name is Brad Cox!
Hello, my name is Tom Love!

Answer 2

尝试使用它的Angular兼容版本，如果仍然想要使用它们，如果它在一个Component中使用，那么只需将代码段放在组件的ngOnInt中，也可以使用import导入组件中的代码，如下所示：

import {Component} from "@angular/core";
import {$} from "jquery";
//also import the datatables plugin for jQuery


@Component({
  selector: "app",
  templateUrl: "app.html",
  styleUrls: ["jquery.dataTables.min.css", "select.dataTables.min.css"]
});
export class LoginComponent {
  constructor() {     
  }

  ngOnInit() {
    $('#example').DataTable( {
    columnDefs: [ {
        orderable: false,
        className: 'select-checkbox',
        targets:   0
    } ],
    select: {
        style:    'os',
        selector: 'td:first-child'
    },
    order: [[ 1, 'asc' ]]
  });
  }

}

Answer 3

<i class="fa fa-close closelabel" data-input="pettype" data-value="Lost" style="font-size: 16px; padding-left: 3px;cursor:pointer"></i>

如何将dataTable包含在angular 2应用程序中？

3 个答案: