TypeError: f is undefined

Question

I'm creating a dataTable, where the data for the table is entirely from the database. I tried in the following way: HTML:

<div class="col-sm-10">
                <table border="0" cellpadding="0" cellspacing="0" width="100%" id="invoice_table" class="table table-bordered table-colstriped table-hover display">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Chain Name</th>
                            <th>Type</th>                       
                            <th>Amount</th>
                            <th>Billable Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>

jQuery:

 function year_month(year_month) {
                     jQuery("#invoice_table").dataTable({
                        "sAjaxSource": "invoice-request-db.php?mode=invoice_dataTable&year_month=" + jQuery("#year_month").val(),
                        "bDestroy": true,
                        "bPaginate": false,
                        "bInfo": false,
                        "bFilter": false,
                        "bSort": false
                    });
                }

I'll have to pass a data, which is the year-month along with the url, so that the datatable gets changed according to the year-month I select. But, when I try using it, I get "TypeError: f is undefined", which is showed in jquery.dataTables.min.js. What's wrong with this? What should I correct?

Answer 1

This can also happen if the table columns do not match your data elements (I removed an element, but forgot to remove the column, which was the cause of this error).

Answer 2

There is syntax error here.

jQuery("#invoice_table").dataTable({
    "sAjaxSource": "invoice-request-db.php?mode=invoice_dataTable",
    "bDestroy": true,
    "bPaginate": false,
    "bInfo": false,
    "bFilter": false,
    "bSort": false
    //}   <--------------------- You need to remove this. It's an extra bracket
});

Answer 3

Make sure you are including jquery.dataTables.min.js I had the same issue and after hours debugging I realised that I was including dataTables.bootstrap.min.js instead

Answer 4

Error in your jQuery code Replace with this. dataTable({ is not closed

 jQuery("#invoice_table").DataTable({
    "sAjaxSource": "invoice-request-db.php?mode=invoice_dataTable",
    "bDestroy": true,
    "bPaginate": false,
    "bInfo": false,
    "bFilter": false,
    "bSort": false
}); 

Answer 5

This Javascript error generally occur if dataTable's Parameter not initialized.

Solution :

Open datatables.bootstrap.min.js in notePad and write these two line below after this line

var f = b.fn.dataTable;

// Code to Insert start
if(typeof f === "undefined")
return null;
// Code to insert End

Above