DataTable is not a function

Yii 2.0 General Discussions
1

Hi all,

I’m taking the first steps on yii framework.

I’m trying to use DataTables on yii but i’m facing this issue:

[color="#FF0000"]Uncaught TypeError: $(…).DataTable is not a function

at HTMLDocument.<anonymous> (table_page:65)


at c (jquery.min.js:4)


at Object.fireWith [as resolveWith] (jquery.min.js:4)


at Function.ready (jquery.min.js:4)


at HTMLDocument.q (jquery.min.js:4)[/color]

The CODE i’m using:

<HTML>

<HEAD>

  &lt;TITLE&gt;My first HTML document&lt;/TITLE&gt;


  


 &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;.&#46;&#46;/1.10.13/css/jquery.dataTables.min.css&quot;&gt;    


&#60;script type=&quot;text/javascript&quot; language=&quot;javascript&quot; src=&quot;.&#46;&#46;/jquery-1.12.4.js&quot;&gt;&lt;/script&gt;


&#60;script type=&quot;text/javascript&quot; language=&quot;javascript&quot; src=&quot;.&#46;&#46;/1.10.13/js/jquery.dataTables.min.js&quot;&gt;&lt;/script&gt;


  


  &#60;script type=&quot;text/javascript&quot; class=&quot;init&quot;&gt;


	&#036;(document).ready(function() {


var table = &#036;('#example').DataTable();


 


&#036;('#example tbody').on('click', 'tr', function () {


    var data = table.row( this ).data();


    alert( 'You clicked on '+data[0]+'&#092;'s row' );


} );

} );

&lt;/script&gt;

</HEAD>

<BODY>

  &lt;table id=&quot;example&quot; class=&quot;display&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;&gt;


    &lt;thead&gt;


        &lt;tr&gt;


            &lt;th&gt;Name&lt;/th&gt;


            &lt;th&gt;Position&lt;/th&gt;

(…)

When i use this code outside Yii this is working properly.

Anyone can help me?

Thanks in advance!

2

Any 404s?

3

Hi Patrick,

No 404s. The only message i got is the one i posted before.

I had a similar issue in the past with highcharts:

Original script:

[i]Highcharts.chart(‘container’, {

chart: {


    type: 'column'


},[/i]

Hi solved the issue, changing the script to:

var chart = new Highcharts.Chart({

            chart: {


                type: &quot;column&quot;,


                renderTo: 'container'


            },

But, in datatables i did’t found the solution to this.

Thanks.

4

Two instances of jQuery on the page and the second one is loaded after jquery.dataTables.min.js? Many widgets and extensions (both built-in and 3rd party ones) require jQuery and register JqueryAsset.