CODEWITHSUNDEEP
jquerytwitter-bootstrap-3datatables
kmansoor
kmansoor

Reputation: 4345

TypeError: 'undefined' is not a function, following DataTable example

I'm getting the above mentioned error:

$(document).ready(function(){   
    var table = $('#mytable1').DataTable();
    $('#mytable1 tbody').on( 'click', 'tr', function () {
        console.log( table.row( this ).data() ); // ERROR
    } );
});

HTML:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test</title>
    <link href="bootstrap-3.1.1-dist/css/bootstrap.min.css" rel="stylesheet">   
    <link href="bootstrap-3.1.1-dist/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="dataTables.bootstrap.css" rel="stylesheet">
    <link href="project.css" rel="stylesheet">
  </head>
  <body>
    <table id="mytable1" class="table table-bordered" cellspacing="0" width="100%">
        <thead>
            <tr><th>Column 1</th><th>Column 2</th></tr>
        </thead>
        <tbody>
            <tr><td>US</td><td>NY</td></tr>
            <tr><td>US</td><td>VT</td></tr>
            <tr><td>US</td><td>MA</td></tr>
            <tr><td>US</td><td>ME</td></tr>
            <tr><td>US</td><td>VA</td></tr>
            <tr><td>US</td><td>WV</td></tr>
            <tr><td>CAN</td><td>04</td></tr>
            <tr><td>CAN</td><td>05</td></tr>
            <tr><td>CAN</td><td>06</td></tr>
        </tbody>
    </table>
    <script src="jquery-1.11.0.min.js"></script>
    <script src="bootstrap-3.1.1-dist/js/bootstrap.min.js"></script>
    <script src="jquery.dataTables.min.js"></script>
    <script src="dataTables.bootstrap.js"></script>
    <script src="homepage.js"></script>
  </body>
</html>

I also tried with:

jQuery(function($) {}

Upvotes: 0

Views: 6454

Answers (1)

davidkonrad
davidkonrad

Reputation: 85518

You could use fnGetData for this :

var table = $('#mytable1').DataTable();
$('#mytable1 tbody').on( 'click', 'tr', function () {
    console.log(table.fnGetData(this));
});

This outputs the content of the clicked row as an array [col1, col2]. Besides that I cannot see any problem with your code.

see fiddle -> http://jsfiddle.net/X2Zs9/

Upvotes: 1

Related Questions