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

我在角2中有一個簡單的應用程序。我想在分頁表中顯示數據。我發現this example非常好，我想在我的應用程序中使用。如何將dataTable包含到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' ]] 
    }); 
});

來源

2017-05-20 theCode

似乎在這個合理的資源已經[如何使用jQuery與Angular2？]（http://stackoverflow.com/questions/30623825/how-to-use-jquery-with-angular2） –

嘗試使用該角兼容的版本，如果仍然想使用它們，如果它在一個組件使用，那麼只需把這段代碼在ngOnInt在您的組件，也使用進口導入代碼在您的組件，這樣的事情：

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

}

來源

2017-05-20 04:27:09 Alireza

感謝您的回答。我有這個錯誤：模塊''jquery''沒有導出成員$' – theCode

取決於你如何安裝jQuery，試試這個從這個頁面：http://stackoverflow.com/questions/39511788/how-to-import- jQuery的到angular2-typescrypt項目：第1步：在您的項目 NPM得到的jQuery中安裝jQuery 第2步：添加類型的jQuery NPM安裝-D @類型/ jQuery的第3步：在您的組件使用它！從'jquery'導入*作爲$; 準備好使用$！ – Alireza

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

    }

來源

2017-05-20 04:38:32

對不起，但我有一個錯誤：模塊'「jquery」'沒有導出成員''' – theCode

添加解釋與您的代碼，談論問題。 –

如果你已經花了的jQuery參考在HTML頁面中不是沒有必要將其導入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(); 
     }); 
    } 
}

來源

2017-10-09 14:29:29

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

回答

相關問題