DataTable is not a function

alvmiguel · February 2017

Hi all,
I'm taking the first steps on yii framework and datatables.
I'm trying to use DataTables on yii but i'm facing this issue:

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)

The CODE i'm using:

<HTML>
<HEAD>
<TITLE>My first HTML document</TITLE>

 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">    
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>

  <script type="text/javascript" class="init">
    $(document).ready(function() {
var table = $('#example').DataTable();

$('#example tbody').on('click', 'tr', function () {
    var data = table.row( this ).data();
    alert( 'You clicked on '+data[0]+'\'s row' );
} );

} );
</script>

</HEAD>
<BODY>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
(...)

When i use this code outside Yii this is working properly.
Anyone can help me?
Thanks in advance!

allan · February 2017

What you have above looks fine, so my guess is that you are loading jQuery multiple times on the page. The way jQuery works is that if you load it again, it obliterates the previous version that was loaded, including any plug-ins that were attached to it.

Load jQuery just once per page.

Allan

alvmiguel · February 2017

Hi Allan, thanks.

Hi already tried to to run only with "jquery.dataTables.min.js" or only with "jquery-1.12.4.js" loaded, but issue remains.
Do you sugest any change on jquery loading?

Thanks.

tangerine · February 2017

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

Surely that suggests that the problem is caused by Yii.
Does Yii do something you haven't noticed?

alvmiguel · February 2017

Hi tangerine,

For this same reason I mentioned it.
Anyone knows if on Yii we should change the javascript?

alvmiguel · February 2017

I had a similar issue in the past with highcharts:

Original script:
Highcharts.chart('container', {
chart: {
type: 'column'
},

Hi solved the issue, changing the script to:

var chart = new Highcharts.Chart({
chart: {
type: "column",
renderTo: 'container'
},

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

pbarney · March 2018

For anyone who is having trouble with this, make sure your ad blocker is not excluding datatables.net. Privacy Badger just decided that after weeks of using DataTables, it was suddenly a threat to privacy, so it quietly blocked it, resulting in several hours of debugging code that wasn't actually buggy.

allan · March 2018

Just been reading up a little about Privacy Badger. As far as I am aware, there is no reason why the CDN resources should be blocked - they don't require cookies, but I'm wondering if you were logged into the forum, since it uses a wildcard for the domain, the cookies would have been transferred. Its possible Privacy Badger didn't like that?

There is an interesting discussion here. Could you try running the code that ghostwords shows and see what the output is?

Thanks,
Allan

adamzul · July 2018

this is happen because yii2 load other jquery after rendering your page. the best solution is make new AppAsset and register it to your page.

namespace app\assets;

use yii\web\AssetBundle;

/**
 * @author Qiang Xue <qiang.xue@gmail.com>
 * @since 2.0
 */
class NewAppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/site.css',
    ];
    public $js = [
        'https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js',
        'https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js',
        'js/appointmentDataTable.js' // this is where your custom script
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',

    ];
}

import NewAppAsset in your page, then add this in your end page:

NewAppAsset::register($this);

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan · July 2018

Awesome - thanks for this information @adamzul.

Allan

DataTable is not a function

DataTable is not a function

Replies

Howdy, Stranger!

Categories

DataTables

DataTable is not a function

DataTable is not a function

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables