2

I have a simple application in angular 2. I want to display data in a paginated table. I found this example very nice and I would like to use in my app.

  • Thehtml of the example is in home.component.html,

  • The css of the example is in script in index.html like:

    <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">

I want to know where I should put the java script code for this to work. I have tried to put in index.html and home.compose.html, but none on this worked correctly.

Please tell me where the java script code should go. Thank. This is the javascript:

$(document).ready(function() {
    $('#example').DataTable( {
        columnDefs: [ {
            orderable: false,
            className: 'select-checkbox',
            targets:   0
        } ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        order: [[ 1, 'asc' ]]
    } );
} );
K Scandrett
  • 16,390
  • 4
  • 40
  • 65
theCode
  • 1,997
  • 4
  • 18
  • 28
  • Seems to be a reasonable resource on this already [How to use jQuery with Angular2?](http://stackoverflow.com/questions/30623825/how-to-use-jquery-with-angular2) – Neil Lunn May 20 '17 at 05:41

3 Answers3

4

If you already took reference of Jquery in your Html page than no need to import it in component.ts file. See the below code it is working fine for me.

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();
        });
    }
}
Jaydev Smart
  • 81
  • 4
2

Try to use Angular compatible version of that, if still want to use them, if it's used in one Component, then just put the piece of code in ngOnInt in your component, also use import to import the code in your component, something like this:

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

}
Alireza
  • 100,211
  • 27
  • 269
  • 172
  • thank for your answer. I am having this error : Module '"jquery"' has no exported member '$' – theCode May 20 '17 at 04:46
  • Depends how you install jQuery, Try this from this page: http://stackoverflow.com/questions/39511788/how-to-import-jquery-to-angular2-typescrypt-projects : Step 1: get jquery in your project npm install jquery Step 2: add type for jquery npm install -D @types/jquery Step 3: Use it in your component! import * as $ from 'jquery'; Ready to use $! – Alireza May 20 '17 at 04:52
0
 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' ]]   });   }

    }
theCode
  • 1,997
  • 4
  • 18
  • 28
Arvind Yadav
  • 31
  • 3