I have a datatable which is being populated and displayed as I wish. There is a date column that I could like to apply a date range filter to. There are two controls on my HTML page that I have given id's to and added the datepicker jquery to . I've looked at the code example given here but when I run the code a and change the date on the control I see an error that oTable.draw() is not a function.

I'm using datatables 1.10.11 and I've set my table up using the following code

var statementTable = $('#statementTable').DataTable({....});

The on change event is being trigger with this line

$('#startdatepicker').change(function () { statementTable.fnDraw(); });

When this line executes I see the error in the console:

statementTable.fnDraw() is not a function.

Can anyone offer any pointers please? Thanks Richard

I have a datatable which is being populated and displayed as I wish. There is a date column that I could like to apply a date range filter to. There are two controls on my HTML page that I have given id's to and added the datepicker jquery to . I've looked at the code example given here https://datatables.net/plug-ins/filtering/row-based/range_dates but when I run the code a and change the date on the control I see an error that oTable.draw() is not a function.

I'm using datatables 1.10.11 and I've set my table up using the following code

var statementTable = $('#statementTable').DataTable({....});

The on change event is being trigger with this line

$('#startdatepicker').change(function () { statementTable.fnDraw(); });

When this line executes I see the error in the console:

statementTable.fnDraw() is not a function.

Can anyone offer any pointers please? Thanks Richard

• javascript
• jquery
• datatables

• What do you use statementTable.fnDraw() or statementTable.draw() ? Because the latter is what you should use – Poul Kruijt Commented Apr 19, 2016 at 14:20
• @PierreDuc I have tried it with both fnDate() and date() but get the same error message. – RaKer Commented Apr 19, 2016 at 14:28
• your statementTable is not a datatable. that's why the fdDraw() does not exist. do you initialize it correctly? maybe a value on the constructor is undefined? – Sharky Commented Apr 19, 2016 at 14:30
• @Sharky, the datatable displays the data correctly and the default functions for ordering and search are working. The code for the table constructor is function SetupStatementDataTable() { var statementTable = $('#statementTable').DataTable({ "paging": false, "searching": true, "info": false, "scrollY": "450px", "sScrollX": "100%", "sScrollXInner": "110%", "asStripeClasses": [], responsive: true, select: true }); – RaKer Commented Apr 19, 2016 at 14:35
• Probably your var statementTable isn't in the same environment. Show your js code for to help!!! – CMedina Commented Apr 19, 2016 at 14:43

2 Answers 2

Method fnDraw() is older API method for DataTables 1.9.

For newer DataTables 1.10+ when you initialize table with DataTable(), use newer draw() API method instead.

$('#startdatepicker').change(function () { statementTable.draw(); });

Alternatively you can initialize your table with dataTable(), then older API methods such as fnDraw() would still work.

This was caused by the declaration of the statementTable being in the wrong place so not available to the wider context. See the comments below the original post.