dataTable is not a function

a.toraby · March 2010

Hi friends
I have written dataTables with ajax source in my host machine and it works perfect.

[code]

16 var oTable;
17 var iSelected = String();
18
19 $(document).ready(function(){
20 oTable = $('#the_table').dataTable({
21 "bJQueryUI": true,
22 "sPaginationType": "full_numbers",
23 'bProcessing':true,
24 'bServerSide':true,
25 'sAjaxSource':'get_inquiries.php?arg='+'new',
26 "bAutoWidth": false,
27 "aoColumns": [
28 { "sWidth": "80px" },
29 { "sWidth": "104px" },
30 { "sWidth": "104px" },
31 { "sWidth": "104px" },
32 { "sWidth": "104px" },
33 { "bVisible": false },
34 { "sWidth": "104px" }
35 ]
36 });
37
38 /* Click event handler */
39 $('#the_table tbody tr').live('click', function () {
40 var aData = oTable.fnGetData( this );
41 var iId = aData[5];
42 iSelected = iId;
43 $('#the_table tbody tr').removeClass('row_selected');
44 $(this).toggleClass('row_selected');
45 $('#test').html(iSelected);
46 } );
47
48 });
49
[/code]
But when I upload files to server it doesn't work and with firebug I found this error in line 34:
$("#the_table").dataTable is not a function
[Break on this error] { "sWidth": "104px" }

php installed on locahost is 5.3.1 but php on server is 5.1.6
Does version of php cause this error?
Thanks for any help

allan · March 2010

Have you included jQuery and the DataTables JS files correctly? Or included jQuery twice?

Allan

a.toraby · March 2010

Hi
Thanks for your attention
This is the full content of file:

[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

???? ??????? ??

@import "jquery/dataTables/media/css/jquery-ui.css";
@import "jquery/datatables/media/css/demo_table.css";
td{padding-right:30px;}
.row_selected{color: gray;}

var oTable;
var iSelected = String();

$(document).ready(function(){
oTable = $('#the_table').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
'bProcessing':true,
'bServerSide':true,
'sAjaxSource':'get_inquiries.php?arg='+'<?php echo $_GET["arg"]?>',
"bAutoWidth": false,
"aoColumns": [
{ "sWidth": "80px" },
{ "sWidth": "104px" },
{ "sWidth": "104px" },
{ "sWidth": "104px" },
{ "sWidth": "104px" },
{ "bVisible": false },
{ "sWidth": "104px" }
]
});

/* Click event handler */
$('#the_table tbody tr').live('click', function () {
var aData = oTable.fnGetData( this );
var iId = aData[5];
iSelected = iId;
$('#the_table tbody tr').removeClass('row_selected');
$(this).toggleClass('row_selected');
$('#test').html(iSelected);
} );

});

??? ?????????? ???????? ??????? ???????? ?????? ???????????

????? / ????? ???? ???????

[/code]

I have no problem when i work on localhost

thomas · March 2010

Hi,

First of all: Allan, thanks for such a stunning jQuery plugin! Datatables rocks big time!!

I've got the same problem, on my localhost everything works amazing but once uploaded to the server i get the following result: TypeError: Result of expression '$('#overzicht').dataTable' [undefined] is not a function.

[code]

var oTable;
var gaiSelected = [];

$(document).ready(function()
{
var oTable = $('#overzicht').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "DBG_DT_SP_merchoverzicht.php",
"bJQueryUI": false,
"bAutoWidth": false,
"fnFilter": true,
"fnSort": true,
"bSortClasses": false,
"aoColumns":
[
{"bVisible":false,"sWidth": "0%"},
{"bVisible":true,"sWidth": "20%"},
{"bVisible":true,"sWidth": "10%"},
{"bVisible":true,"sWidth": "54%"},
{"bVisible":true,"sWidth": "2%"},
{"bVisible":true, "bSortable":false,"sWidth": "10%"},
{"bVisible":true, "bSortable":false,"sWidth": "2%"}
],
"oLanguage":
{
"sLengthMenu": "_MENU_ items per scherm",
"sSearch": "Snel zoeken:",
"sInfoEmpty": "0 tot 0 van 0 rijen",
"sInfo": "_START_ tot _END_ van _TOTAL_ rijen",
"sInfoFiltered": "(gefilterd uit _MAX_ rijen)",
"sZeroRecords": "Geen resultaten gevonden",
"oPaginate":
{
"sFirst": "Eerste",
"sLast": "Laatste",
"sNext": "Volgende",
"sPrevious": "Vorige"
}
},
"fnDrawCallback": function ()
{//*
$('#overzicht tbody tr').each(function ()
{
var iPos = oTable.fnGetPosition(this);

if (iPos != null)
{
var iPos = oTable.fnGetPosition(this);
var aData = oTable.fnGetData(iPos);
var iId = aData[0];

if (jQuery.inArray(aData[0], gaiSelected) != -1)
{
$(this).addClass('row_selected');
}

}
});

$('#overzicht tbody tr').each(function()
{
// de click-listener
$(this).click(function ()
{
// de rij waarin deze checkbox staat bepalen...
var parentRow = this;

//var iPos = oTable.fnGetPosition(this);
var iPos = oTable.fnGetPosition(parentRow);
var aData = oTable.fnGetData(iPos);
var iId = aData[0];

if ( jQuery.inArray(iId, gaiSelected) == -1 )
{
gaiSelected[gaiSelected.length++] = iId;
}
else
{
gaiSelected = jQuery.grep(gaiSelected, function(value)
{
return value != iId;
});
}
$(parentRow).toggleClass('row_selected');
// alert (gaiSelected);
});
});
//*/
}
});

//*
$("#itemsVerwijderen").click(function(){
// alert(gaiSelected);

if (gaiSelected.length < 1){ return false;}

// de string die doorgegeven gaat worden via ajax...
var str = "";

// voor elk element van de gaiSelected-array...
$(gaiSelected).each(function(n,i){
str += this + ",";
});

// de laatste komma verwijderen...
str = str.slice(0, -1);

$.ajax({
type: "POST",
url: "DBG_SP.php?do=verwijderMerchItem",
data: {gekozen : str},
success: function(msg)
{

//alert( "Data Saved: " + msg );
if (msg)
{
// alert(msg);
// de boodschap weergeven
$("#messageContainer").empty();
$(".message").fadeIn("slow");

$("#messageContainer").append(msg);
}

// de gaiSelected leegmaken
gaiSelected = [];

// de tabel hertekenen
oTable.fnDraw();
}
});
});

//*/

$("input:submit,input:button").button();

});

[/code]

pktm · March 2010

Did you ensure that both, jQuery and datatables were loaded correctly? You could do that using the FireFox Plugin FireBug.

Did you use the jQuery version that ships with datatables or your own? Is it the latest version?

regards, pktm

plmcgrn · April 2011

I had this issue too. Turns out, the web server didn't like file names with multiple "." separators. I'm using Tomcat, and in Firebug, I noticed that the JS files were returning a 404 in the Net panel. Easy fix - rename both the JS files to only have the file extension and change references to them.

ganapathy_paulraj · September 2011

the same issue ,seems even the easy fix stated above doesnt works for me

can some one help me

Thanks in advance,
Ganapathy

allan · September 2011

A link to the page you are having issues with would be very helpful, as there are a number of things that can cause this. the most likely suspect is loading the jQuery library multiple times I would say.

Allan

ganapathy_paulraj · September 2011

allan,

thanks for the response,

am initializing the JS from the JSNI method and my code,

[code]
public static native void loadDataTable(String id ,String urlString) /*-{
$wnd.jQuery("#" + id).dataTable({
"bServerSide": true,
"sAjaxSource": "/admin.htm",
"bProcessing": true,
"sPaginationType": "full_numbers",
"bJQueryUI": true
});
}-*/;
[/code]

ganapathy_paulraj · September 2011

and the exception is

00:02:31.489 [ERROR] Uncaught exception escaped
com.google.gwt.core.client.JavaScriptException: (TypeError): $wnd.jQuery("#" + id).dataTable is not a function fileName: http://127.0.0.1:8888 lineNumber: 54 stack: ("userLogHistory","admin.htm")@http://127.0.0.1:8888:54 @:0 (null,12451862,[object MouseEvent],[object HTMLAnchorElement],[object GWTJavaObject])@http://127.0.0.1:8888/gcsportal/hosted.html?gcsportal:56 ([object MouseEvent])@http://127.0.0.1:8888:113 ((function (evt) {var listener, curElem = this;while (curElem && !(listener = curElem.__listener)) {curElem = curElem.parentNode;}if (curElem && curElem.nodeType != 1) {curElem = null;}if (listener) {if (__gwt_makeJavaInvoke(1)(null, 12386337, listener)) {__gwt_makeJavaInvoke(3)(null, 12451862, evt, curElem, listener);}}}),[object HTMLAnchorElement],[object Object])@http://127.0.0.1:8888:38 @:0 (null,27,(function (evt) {var listener, curElem = this;while (curElem && !(listener = curElem.__listener)) {curElem = curElem.parentNode;}if (curElem && curElem.nodeType != 1) {curElem = null;}if (listener) {if (__gwt_makeJavaInvoke(1)(null, 12386337, listener)) {__gwt_makeJavaInvoke(3)(null, 12451862, evt, curElem, listener);}}}),[object HTMLAnchorElement],[object Object])@http://127.0.0.1:8888/gcsportal/hosted.html?gcsportal:56 ([object MouseEvent])@http://127.0.0.1:8888:26 at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:195) at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:120) at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:507) at com.google.gwt.dev.shell.ModuleSpace.invokeNativeObject(ModuleSpace.java:264) at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeObject(JavaScriptHost.java:91) at com.google.gwt.core.client.impl.Impl.apply(Impl.java) at com.google.gwt.core.client.impl.Impl.entry0(Impl.java:188) at sun.reflect.GeneratedMethodAccessor120.invoke(Unknown Source) at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25) at java.lang.reflect.Method.invoke(Method.java:597) at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103) at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71) at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:157) at com.google.gwt.dev.shell.BrowserChannel.reactToMessages(BrowserChannel.java:1668) at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:401) at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:222) at java.lang.Thread.run(Thread.java:662)

ganapathy_paulraj · September 2011

issue resolved :need to load DataTables after jQuery scripts section, and included jQuery once.

works perfect ,except for the overlay "processing wait layer " it overlaps on my headers .

allan · September 2011

> works perfect ,except for the overlay "processing wait layer " it overlaps on my headers .

Sounds like a CSS z-index issue. Have a look at the processing element in Firebug and you can adjust the z-index to match what you need for your web-site.

Allan

ganapathy_paulraj · September 2011

Thanks Allan ,,will look into that , but before, is that possible to restrict the ajax call to once and make use of the data list which is available in the session ,for the further changes in the pagination such as no of results per page,changing the page numbers and sorting functionality?

allan · September 2011

So which would you prefer - use the DataTables call or pass the data from your own call into DataTables? With server-side processing you will probably need to use the DataTables one. In which case you can get the Ajax object returned using oTable.fnSettings().qjXHR - from which you can then get all the regular jQuery Ajax information.

Allan

ganapathy_paulraj · September 2011

thanks allan, for the quick response.I prefer the the datatables call. i restricted the calls in the server side. i have these doubts ,listed :
1) Am dynamically adding the check box in each rows and for this probably so i need to append an empty space with the corresponding mDataProp ?
2) any examples/links to use render the checkbox and to pass the selected rows id to the server ?
3) the same that am expecting is implemented without the checkbox in this
http://datatables.net/forums/discussion/comment/3315#Form_Comment
4)any examples/samples to pop a edit form for the rows that i select ?

Ganapathy

bmoran79 · September 2011

I too am having a problem. I'm getting js error datatable() is not a function. I'm using a synchronous ajax request but when the response comes back, that's when I receive the error. I'm using jquery with the struts framework in java.

[code]

$(function(){
//Batch Table
var bTable=$("#batchtable").dataTable({
"bPaginate":false,
"sScrollY":"200px",
"bRetrieve":true,
"bFilter":true,
"bJQueryUI":true,
"bAutoWidth":true,
"bInfo":false,
"aoColumns":[
{"bSortable":false},
{"iDataSort":2},
{"bVisible":false}
],
"aaSorting":[[1,"desc"]]
});

//Batch Table Radio Button Select
$(".batch").click(function(){
$("#action").val("getStores");
//$("#form").submit();
$.ajax({type:"POST",
url:"/ReportsAndMooreWeb/BatchMaintenance.do",
data:$("#form").serialize(),
async:false,
success: function(data){$("#form").html(data);bTable.fnDraw();sTable.fnDraw();dTable.fnDraw();}
});
});

//Date Pickers
var dates = $( "#from" ).datepicker({
defaultDate:"+0d",
beforeShowDay: function(date){
if($(this).attr("id")=="from") {
if(date.getDay()==2)// 2=Tues
return [true,""];
else
return [false,""];
}
},
onSelect: function( selectedDate ) {
var s=selectedDate.split("/");
var dt=new Date(s[2],(s[0]-1),s[1]);
var m=0;
var d=0;
var y=0;

while(dt.getDay()!=0){
m=dt.getMonth();
d=dt.getDate();
y=dt.getFullYear();
dt=new Date(y,m,d+1);
}
$("#to").val((dt.getMonth()+1)+"/"+(dt.getDate())+"/"+dt.getFullYear());
}
});
if($("#from, #to").val()=="") {
var curr=new Date();
var m=0;
var d=0;
var y=0;

while(curr.getDay()!=2){
m=curr.getMonth();
d=curr.getDate();
y=curr.getFullYear();
curr=new Date(y,m,d-1);
}
$("#from").val((curr.getMonth()+1)+"/"+curr.getDate()+"/"+curr.getFullYear());
$("#to").val((curr.getMonth()+1)+"/"+(curr.getDate()+5)+"/"+curr.getFullYear());
}

//Store Table
var sTable=$("#storetable").dataTable({
"bPaginate":false,
"sScrollY":"173px",
"bRetrieve":true,
"bFilter":true,
"bJQueryUI":true,
"bAutoWidth":true,
"bInfo":false
});

//Details Table
var dTable=$("#detailtable").dataTable({
"bPaginate":false,
"sScrollY":"200px",
"bRetrieve":true,
"bFilter":true,
"bJQueryUI":true,
"bAutoWidth":false,
"bInfo":false
});

//Add Batch Button
$("#addBatch").click(function(){
if($(".checkboxes:checked").length>=1) {
$("#action").val("addBatch");
//$("#form").submit();
$.ajax({type:"POST",
url:"/ReportsAndMooreWeb/BatchMaintenance.do",
data:$("#form").serialize(),
async:false,
success: function(data){$("#form").html(data);}
});
}
else
alert("You must select at least one store");
});

//Remove Batch Button
$("#removeBatch").click(function(){

});

//Shift Checkbox
if($(".checkboxes").length>=1)
$(".checkboxes").shiftcheckbox();

//Select All Stores Button
$("#selectAll").click(function(){
$("#stores :checkbox").attr("checked","checked");
});

//DeSelect All Store Button
$("#deselectAll").click(function(){
$("#stores :checkbox").removeAttr("checked");
});

});

[/code]

GregP · September 2011

bmoran: Forgive me for re-stating the error rather than providing a solution, but it's a matter of timing. Without seeing the rest of the page it's hard to say for sure, but it looks like the script creating your dataTables objects is firing before the DataTables JavaScript is ready. If your custom script is in the body and DataTables is in the head, it's possible that the header script(s) are still loading when the custom script is firing.

bmoran79 · September 2011

GregP: I see what you're saying and it makes sense. The problem is that I don't know of a work around.

GregP · September 2011

There's no workaround, just rejigging the order your scripts are firing. ;-)

Instead of executing within a script tag, moving everything to a JS file should help for starters, and then you have (don't copy-paste this, they're just fake versions):

That resolves the first bit of timing: making sure the scripts are available in the right order.

If there's still a timing issue, it HAS to be within "myAwesomeApp.js". At that point, you audit all of your functions and make sure that they are in a sane order. For example, this will not work:

[code]
function myFunction(); // calling a function that's not available yet
var myFunction = function() { do stuff }
[/code]

---

It's also possible that you're trying to call dataTables on a non-jQuery object. Based on my quick audit of your code, I don't THINK that's the case, but it's worth checking.

bmoran79 · September 2011

GregP: your last comment has me a little confused. I load my jQuery libs in script tags in the head. I set up my datatables in script tags in the head as well. I don't think I posted my js imports in my last post so here my code up to the body tag.

Thanks for your suggestions!

[code]









$(function(){
//Batch Table
var bTable=$("#batchtable").dataTable({
"bPaginate":false,
"sScrollY":"200px",
"bRetrieve":true,
"bFilter":true,
"bJQueryUI":true,
"bAutoWidth":true,
"bInfo":false,
"aoColumns":[
{"bSortable":false},
{"iDataSort":2},
{"bVisible":false}
],
"aaSorting":[[1,"desc"]]
});

//Batch Table Radio Button Select
$(".batch").click(function(){
$("#action").val("getStores");
//$("#form").submit();
$.ajax({type:"POST",
url:"/ReportsAndMooreWeb/BatchMaintenance.do",
data:$("#form").serialize(),
async:false,
success: function(data){
$("#form").html(data);
sTable.fnDraw();
}
});
});

//Store Table
var sTable=$("#storetable").dataTable({
"bPaginate":false,
"sScrollY":"173px",
"bRetrieve":true,
"bFilter":true,
"bJQueryUI":true,
"bAutoWidth":true,
"bInfo":false
});

//Details Table
var dTable=$("#detailtable").dataTable({
"bPaginate":false,
"sScrollY":"200px",
"bRetrieve":true,
"bFilter":true,
"bJQueryUI":true,
"bAutoWidth":false,
"bInfo":false
});

//Add Batch Button
$("#addBatch").click(function(){
if($(".checkboxes:checked").length>=1) {
$("#action").val("addBatch");
//$("#form").submit();
$.ajax({type:"POST",
url:"/ReportsAndMooreWeb/BatchMaintenance.do",
data:$("#form").serialize(),
async:false,
success: function(data){$("#form").html(data);}
});
}
else
alert("You must select at least one store");
});

//Remove Batch Button
$("#removeBatch").click(function(){

});

//Shift Checkbox
if($(".checkboxes").length>=1)
$(".checkboxes").shiftcheckbox();

//Select All Stores Button
$("#selectAll").click(function(){
$("#stores :checkbox").attr("checked","checked");
});

//DeSelect All Store Button
$("#deselectAll").click(function(){
$("#stores :checkbox").removeAttr("checked");
});

});

[/code]

GregP · September 2011

The very last comment on my previous post just meant that if you call name.dataTable() when "name" isn't already a jQuery object, it won't work. I don't see you doing that in your code, so it's a moot point. Ignore it. ;-)

--

I'd have to see the code in realtime to figure out exactly what's going on. For sure I would think that you have the script sources in the correct order. I personally prefer external JS files instead of throwing everything into the tag, but as far as I know it doesn't make a difference in execution timing.

Without a debugger in front of me, I honestly can't see what could be going wrong. Have you noticed any errors in your JavaScript console or network activity other than that one?

PS, I edited your last paste to remove the DatePicker function which had no impact on the DataTables side of things.

PPS for anyone else engaged in helping out-- he doesn't really have in his src attributes, that's just this forum incorrectly reformatting the original text.

bmoran79 · September 2011

GregP: Thanks for your help. At this point, I'm going to remove my ajax call and submit the form the 'old-fashioned' way.

bmoran79 · September 2011

One other question, not sure if anyone has ever seen this...
When my page response comes back (ajax submit or regular submit), my datatable scrolls all the way to the top. I'll give an explanation:
I have a datatable with radio buttons no pagination. I scoll down and select a radio button which submits the form. The response comes back, the datatable refreshes and is at the top.

I want the datatable to go to the bottom where the radio button was selected.

Any ideas?

inquisitiveThoughts · February 2012

I had the same problem of "no function". My development environment is Linux, but the production server is Windows. Did what was suggested above by replacing the '.' character with something else. IT WORKS!!!

dataTable is not a function

dataTable is not a function

Replies

Howdy, Stranger!

Categories

DataTables

dataTable is not a function

dataTable is not a function

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables