error TS2339: Property 'DataTable' does not exist on type 'JQuery'.

An_Alien

Hey guys,

I've been having tons of issues with datatables.

First, I'm not sure if all the required files correctly but this is one of the ways the TS compiler is okay with.

Secondly, I get the DataTable not existing on type Jquery.

`import * as React from 'react';
import $ from 'jquery';
var dt:any = require( 'datatables.net' );
dt(window, $);
var dtdt:any = require( 'datatables.net-dt' );
dtdt(window, $);
var dtSelect:any = require('datatables.net-select');
dtSelect(window, $);
var dtSelectDt:any = require('datatables.net-select-dt');
dtSelectDt(window, $);

// import 'datatables.net-dt/css/jquery.datatables.min.css'; //default styling
// import 'datatables.net-select/js/';
// import 'datatables.net-select-dt/';
// import 'datatables.net-dt/';

// import 'datatables.net-bs4/css/dataTables.bootstrap4.min.css';
// $.DataTable = require('datatables.net');
// import * as select from 'datatables.net-select';
// import * as dt from 'datatables.net-dt';

// import * as selectDt from 'datatables.net-select-dt'
// require('datatables.net-bs4')(window, $);;
// require( 'datatables.net-select' );
// require( 'datatables.net-dt' );
// require( 'datatables.net-select-dt');

enum DashboardColumns {
    ...
}

interface JQuery {
DataTable():void;
}

export interface DashboardProps { }

export interface DashboardState {
    initialLoad: boolean;
    selectedItemID: number;
}

class Dashboard extends React.Component<DashboardProps, DashboardState> {
    
    private _datatable;
    private _areColumnFiltersVisible = false;
    private _datatableProcessing = false;

    constructor(props){
        super(props);
        this.state = {
            initialLoad: true, 
            selectedItemID: 0
        };
    }

    public componentDidMount() {
        this._applyData();
    }
    dtOptions: any = {};
    private _applyData() {

    this._datatable = ($("#ERDashboard") as any).DataTable(

            this.dtOptions = {
            // fixedHeader: {
            //     header: true,
            //     footer: true
            // },
            processing: false,
            serverSide: true,
            ajax: this._fetchData,
            paging: true,
            scrollX: true,
            pageLength: 10,
            // columnDefs: [ {
            //     render: function (data, type, full, meta){
            //         console.log(data);
            //         return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
            //     },  
            //     checkboxes: {
            //         selectRow: true
            //     },
            //     targets:   0,
            // } ],
            columnDefs: [ {
                orderable: false,
                className: 'select-checkbox',
                targets:   0,
                defaultContent: ''
            } ],
            // select: {
            //     style: "os",
            //     selector: 'td:first-child'
            // },
            order: [[ 1, 'asc' ]],
            select: 'multi',`

allan

Have you got a link to a repo that I can use to reproduce this issue please? Is it a TypeScript error you are getting, or an error in the browser?

Allan

An_Alien

It's a typescript error (error TS2339). I'll try to get you to repo when I'm back in the office.