table.row is not a function

table.row is not a function

JochenJochen Posts: 5Questions: 3Answers: 0

Error messages shown:

Uncaught TypeError: table.row is not a function
at HTMLTableSectionElement.<anonymous> (table.jsp:32)

Description of problem:

Hi,

this is most likely a stupid beginners question, but bear with me. I am getting the above error in my demo page, after clicking on the single row in the table. A bit of Google recherche revealed, that this is most likely, because I I'd be using the datatable() method to create my table, rather than .DataTable(). However, that is not the case, as you can see in the attached standalone example.

Any ideas, what might be wrong?

Thanks,

Jochen

    <!doctype html>
    <html lang="en">
    <head>
       <meta charset="utf-8">
       <title>table demo</title>
       <link rel="stylesheet" href="https:////code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"></link>
       <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/dataTables.jqueryui.min.css"></link>
       <link rel="stylesheet" href="https://cdn.datatables.net/scroller/2.0.2/css/scroller.jqueryui.min.css"></link>
       <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
       <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
       <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
       <script src="https://cdn.datatables.net/1.10.21/js/dataTables.jqueryui.min.js"></script>
       <script src="https://cdn.datatables.net/scroller/2.0.2/js/dataTables.scroller.min.js"></script>
       <script>
          var table = $(document).ready(function(){
                  $( "#packageTable" ).DataTable({});
                  $( "#packageTable tbody" ).on('click tr', function() {
                          alert("Table = " + table);
                          var d = table.row( this ).data();
                          alert("Click received on " + d);
                   });
          });
       </script>
     </head>
     <body>
     <div>
         <table id="packageTable"  class="display nowrap" style="width:100%">
           <thead>
              <tr>
                <th>Id</th>
                <th>Package</th>
                <th>Log level</th>
                <th>Log file</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                  <td>Foo</td>
                  <td>FooPackage</td>
                  <td>DEBUG</td>
                  <td>./logs/packages/FooPackage.log</td>
              </tr>
            </tbody>
         </table>
     </div>
     </body>
     </html>

`

This question has an accepted answers - jump to answer

Answers

This discussion has been closed.