我在 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' ]]
} );
} );
如果你已经在 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();
});
}
}
Angular 兼容版本,如果仍然想使用它们,如果它在一个组件中使用,那么只需将这段代码放在组件的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' ]]
});
}
}
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' ]] }); }
}