CODEWITHSUNDEEP
javascriptangular
theCode
theCode

Reputation: 2357

How to include dataTable to angular 2 application?

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. 

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

Upvotes: 2

Views: 1967

Answers (3)

Jaydev Smart
Jaydev Smart

Reputation: 81

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();
        });
    }
}

Upvotes: 4

Alireza
Alireza

Reputation: 104760

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

}

Upvotes: 2

Arvind Yadav
Arvind Yadav

Reputation: 31

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

    }

Upvotes: 0

Related Questions