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:

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

@yarwest using script tag, <script type="text/javascript" src="resources/js/jquery.dataTables.min.js"></script> — Vikas Biradargoudar
– Vikas Biradargoudar, Commented Dec 30, 2017 at 11:20
@yarwest TypeError: f is undefined [Learn More] jquery.dataTables.min.js:27:64 — Vikas Biradargoudar
– Vikas Biradargoudar, Commented Dec 30, 2017 at 11:35
Have you tried replacing the import of your local file with the online version? (cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js) — yarwest
– yarwest, Commented Dec 30, 2017 at 11:43

Gyrocode.com · Accepted Answer · 2017-12-30 19:06:14Z

2

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.

answered Dec 30, 2017 at 19:06

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mr Lister · Accepted Answer · 2018-01-01 14:21:40Z

1

yup - that's how DataTables tells you that there is a mismatch in the table structure. The most likely solution is to make sure that your <th> row matches your <td> row.

I ran into this last night when I noticed that last_name wasn't part of the DataTables search box. DataTables searches against the field names provided in the column definition, not what is ultimately rendered out. So I added the last_name column as visible: false thinking it wouldn't need a header. Saw the same style error message and had to go back and add last to the header row = problem solved.

var columns = [

  { data: "first_name",
    render: function(data, type, row) {
      return row.first_name + " " + row.last_name;
    }
  },
  { data: "last_name",
    visible: false
  },
...
]

edited Jan 1, 2018 at 14:21

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Dec 30, 2017 at 23:54

xeo

8322 gold badges8 silver badges25 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related