Jquery Datatable : f is not defined in jquery.dataTables.min.js

Question

I'm using Jquery Datatables. I am getting f is not defined console error. I am not using ajax request in Datatables.

Below is my Table:

<table id="myTable"  class="table table-striped table-bordered dataTable"  >

    <thead>
      <tr>
         <th>Trip ID</th>
         <th>User Name</th>
         <th>From</th> 
         <th>To</th>
     </tr>
    </thead>
    <tbody>
     <tr><td>123231</td></tr>
     <tr><td>John</td></tr>
     <tr><td>dfshggsf</td></tr>
     <tr><td>dsfgfsgfsg</td></tr> 
   </tbody>
    <tfoot>
         <tr>
          <th>Trip ID</th>
          <th>User Name</th>
          <th>From</th> 
          <th>To</th>       
         </tr>
    </tfoot> 
        </table>    
</table>

Below is the Jquery Code:

$(document).ready(function(){
      $('#myTable').DataTable({

          'ordering':false,
            dom: 'Bfrtip',

            buttons:[
                 {
                     extend: 'excelHtml5',
                     title: 'Data export'
                 },
                 {
                     extend: 'pdfHtml5',
                     title: 'Data export'
                 },
                  {
                     extend: 'csvHtml5',
                     title: 'Data export'
                 },
                  {
                     extend: 'print',
                     title: 'Data export'
                 } 
           ]
        });
    });

Below is the console error:

TypeError: f is undefined [Learn More] jquery.dataTables.min.js:27:64 jb http://localhost:8080/RajaRathaDashBoardApp/resources/js/jquery.dataTables.min.js:27:64 ga http://localhost:8080/RajaRathaDashBoardApp/resources/js/jquery.dataTables.min.js:48:224 e http://localhost:8080/RajaRathaDashBoardApp/resources/js/jquery.dataTables.min.js:92:256 m/< http://localhost:8080/RajaRathaDashBoardApp/resources/js/jquery.dataTables.min.js:92:342 each http://localhost:8080/RajaRathaDashBoardApp/resources/js/jquery-1.12.4.js:370:10 each http://localhost:8080/RajaRathaDashBoardApp/resources/js/jquery-1.12.4.js:137:10 m http://localhost:8080/RajaRathaDashBoardApp/resources/js/jquery.dataTables.min.js:82:457 h.fn.DataTable http://localhost:8080/RajaRathaDashBoardApp/resources/js/jquery.dataTables.min.js:164:289 http://localhost:8080/RajaRathaDashBoardApp/RajarathaTripHistory:38:4 fire http://localhost:8080/RajaRathaDashBoardApp/resources/js/jquery-1.12.4.js:3232:11 fireWith http://localhost:8080/RajaRathaDashBoardApp/resources/js/jquery-1.12.4.js:3362:7 ready http://localhost:8080/RajaRathaDashBoardApp/resources/js/jquery-1.12.4.js:3582:3 completed http://localhost:8080/RajaRathaDashBoardApp/resources/js/jquery-1.12.4.js:3617:3

Please help me solve this problem...Any help will be appreciated.

Answer 1

You have incorrect table structure in tbody section.

Corrected table structure is shown below.

<tbody>
   <tr>
      <td>123231</td>
      <td>John</td>
      <td>dfshggsf</td>
      <td>dsfgfsgfsg</td>
   </tr> 
</tbody>

See this example for code and demonstration.