如何將dataTable包含到angular 2應用程序中？

Question

我在angular 2中有一個簡單的應用程序。我想在分頁表中顯示數據。 我發現這個示例非常好，我想在自己的應用中使用。

• 該示例的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文件中。 看到下面的代碼對我來說很好用。

import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal';
import { Observable } from 'rxjs/Rx';
import { Global } from '../shared/global';
declare var $ : any;

@Component({
    templateUrl: 'app/Component/assignfeatureview.component.html'
})

export class AssignFeatureViewComponent {
    constructor() {

    }
    ngOnInit() {
        $(document).ready(function () {
            $('#tblAssignFeature').DataTable();
        });
    }
}

Answer 2

嘗試使用該版本的Angular兼容版本，如果仍要使用它們，如果它在一個組件中使用，則只需將代碼ngOnInt放入組件中的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

 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' ]]   });   }

    }