Any information on what could cause this would be great. I first assumed an empty cell might be the culprit so I filled all empty cells with 'N/A.' Again, any help would be great.
This is typically due to DataTables thinking that there are more columns in the table than there actually are. If you have defined aoColumns then it is worth checking you got the correct number in that array. If you are using the DOM, then it's worth checking your TH and TD cells all add. Other than that - perhaps you could provide a bit more information. Ideally a link showing the problem.
Thanks for the link! However, when I load it up, I don't get any error. Could you specify what browser/platform and what actions you need to take in order to get this error?
Thanks for the second link - I do see the error here. It looks like your HTML is invalid - there is a spare "TH" element in the header - which is what is getting DataTables confused. It thinks there are 7 columns rather than 6 (since the tbody and thead cells don't match up).
As so as this is fixed, the problem should go away :-)
Dear:
I do have some questions that let me being at a loss .Hope I can get your help.
I use Microsoft Visual Studio 2005 and Microsoft sql server 2005 as my development tools. The felow are my codes on using dataTables(the version is 1.5 Beta.7). I use a function named GetData to receive server-side data . I want to get the contents of the selected row of dataTables.To my surprise ,as for as the first ten rows concerned, the click event that I bind to the dataTables
do work accurately. That means the function fnFormatDetails() can be triggered as soon as t click the row which No is less than 10. But when the dataTables has more than 10 rows, the function fnFormatDetails() will never be triggered! I dont know whether my codes are wrong or not.
Be happy to get you answers.
function fnFormatDetails ( nTr )
{
var iIndex = oTable.fnGetPosition( nTr );
$("#show").css({display:"block"});
var aData = oTable.fnSettings().aoData[iIndex]._aData;
//the below codes is deleted
}
function GetData()
{
var param =$("#purid").val();
$.ajax({
type:"get",
/* the server-side process
url:"purcontractDetail.ashx",
data: ({purcontractid :"1"}),
dataType: "json",
async: false,
success:function(data){
aDataSet=data;
}
});
}
$(document).ready(function(){
/* define variables
var aDataSet;
var oTable;
var asInitVals = new Array();
/**get server-side data
GetData();
/*initialize the dataTables
oTable=$('#dlist').dataTable({
"bProcessing": true,
"aaData": aDataSet,
"aoColumns": [
{"sTitle":"num","bVisible":false },
{ "sTitle": "code"},
{ "sTitle": "name"},
{ "sTitle": "quantity"},
{ "sTitle": "unit"}
],
"oLanguage": {"sSearch": "Search all columns:"}
});
/*set table foot
$("tfoot input").keyup(function(){
/* Filter on the column (the index) of this element */
oTable.fnFilter(this.value, $("tfoot input").index(this)+1);
});
//* Add a click handler to the rows - this could be used as a callback */
$("#dlist tbody").click(function(event) {
$(oTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');});
$(event.target.parentNode).addClass('row_selected');
});
$("#dlist tbody tr").click(function(event){
/* the function to show the contents of selected nTr
fnFormatDetails(this);
});
$("tfoot input").each( function (i) {
asInitVals[i] = this.value;
} );
The problem is that your event handlers are only being added to the elements which are visible in the DOM. Have a look at the post-init events example for how to do this: http://datatables.net/examples/example_events_post_init.html
Also, I'm not sure why you used this thread about sData? It's probably best to open a new thread when bringing up a new issue.
Dear Allan :
I have resolved my problems with your suggestion ,thanks!
Also,I have another question for your precious idea . The felow :
I want to execute the pagination on server-side ,which means that I dont extract all mathced rows at a time . For example ,I only get the first 50 rows to show in my dataTables ,when I click the 'next Button ' on page ,the following 50 rows will be extracted from server-side and shown in dataTables.(suggest I have total 100 rows on server -side).
Yours
LZ
Server-side processing is a new feature in DataTables 1.5 (you can get the latest beta from the download page). Have a look here to see an example of this in action: http://datatables.net/1.5-beta/examples/data_sources/server_side.html
Having said that, 100 rows total really isn't that many. DataTables is more than capable of coping with this on the client-side if you wish to use it as such.
I've got the same error in case when i try generate table's ... with php mysql-request.
i checked myself drowing static table directly with html and in this case everything works fine.
it seems to me, that dataTable script "can't see" the values, which returned by my php-function, when trying analyze data type of the values in the table.
error message is (from FF console:
Error: sData is undefined
Sourse: http://sprestij.ru/jq/dt/media/js/jquery.dataTables.js
Line: 436
i tried to replace all $row[..] whith some symbols to check if the MySql DB datatypes joking on dataTable script but in vain.
So, it's clear that i don't understand smth referenced to server-side and client-side interaction...
I'm not some professional programmer.
Please, help me to find out my mistake and Thanks a lot for your work!
P.S. don't mind on the "??".. it's just russian letters with 1251 encoding.
What you've post looks good - I don't see any errors in there (off the bat). Can you post a link to the page which is actually using DataTables? If not, then perhaps you could post an example of the data that you are using and the initialisation code?
Great thanks for that! The problem is the second column with information such as "2009-05-13". The problem is that DataTables 1.4.3 has a bug in it where it treats this as a number. This is obviously wrong, but all the characters are valid for a number - which is why it trips up here.
Try installed DataTables 1.5 beta 8 which fixes this issue: http://datatables.net/download
Unfortunatelly, Allan, the truble still appears...
i updated the version up to 1.5 beta 8 as u told, but it didn't help.
take a look again at the URl i gave... there are two tables... fields and columns are the same... scripts for each too.. the one with php-generated rows doesn't work :(
i found and it's for sure that reason of the error is not the date-format value parsing.
i insert the
[code]alert(sData); [/code]
into your script at line 456 to see how it works and try for static table content which works.
it gave me the parsing flows by the column not by row...
so, i applied script to problem table. the first column of the table is just the sequent ids starting with "1".
alert window show me the first value = 1 (it's just a record_id from DB), then next obviously should be returned just "2", but alert window returning "undefined".
how could it be? i have no idea :(
one more thing why i'm sure the date-format doesn't matter.
i tried to generate table rows from php without selected from DB values just this way:
[code]
$res_str .= '
1
2009-02-01
11:22:00
Kate
internet
fine
no comments
';
}
echo $res_str;
[/code]
but even in this case i received "sData undefined" error...
so, i'm not proffy... here are some special workflow interaction which my skills can't make me understand...
The problem is that the HTML you generate is not valid here. Line 9 in the code you passed should be a closing tag - not an opening one! The extra opening tag resulted in the browser closing the old row and then opening a new empty one. With the empty row there was no data for DataTables to parse, which is where it was tripping up.
Try this:
[code]
$res_str .= '
1
2009-02-01
11:22:00
Kate
internet
fine
no comments
';
}
echo $res_str;
[/code]
Just a follow-up about the appearance of "sData is undefined" errors:
I encountered this error several times when making changes t the layout of my tables and could not isolate the cause. It appears that in certain browsers, the "old" table structure (ie number of columns) remains cached, so even when you reload a (valid) page with a different number of table columns, you will encounter an "sData undefined" error. In some cases, I've had to close and re-open my browser following a change to a table layout in order to clear the browser's cache and get the error to resolve.
Are you using server-side processing or an Ajax source? In which catch IE will tend to cache the result of the XHR since it's only using GET. One way around this is to simply add a random variable to the end of the source address, which will ensure it's not cached.
just to add to this, I had the sData problem, checked my HTML (having previously bobo'ed on my th's etc) and all looked fine....
decided to up date to 1.7.5 from 1.5.? and got the following error in Firebug...
[code]DataTables warning (table id = 'tblSyncs'): Unexpected number of TD elements. Expected 217 and got 187. DataTables does not support rowspan / colspan in the table body, and there must be one cell for each row/column combination.[/code]
I just wanted to say thanks to Allan for putting this in, we all know how labourious it can be to comment code, but this was a real help (i had a lazy colspan in)... thanks again... have made a note to make a donation at Month End.....
<<>>
Many thanks Allan! It was this that finally clued me into looking for a structural problem in my table and it turned out to be an extra[code] [/code], giving me a [code][/code] doubled opening tag. That probably gave me a miscount of the columns and the resulting "sdata is undefined" error as revealed by Web Developer. In a way, I got lucky as this structural problem had led to me having similar problems with other sorters - and I would have settled for using those and hence never found the datatables site, with its superior functionality, support and documentation. I don't yet know if I'll be making commercial use of it, but suspect I will and that warrants a donation. Actually, I think a small but reasonable donation will be in order every time I employ it on a site - this is a really good resource.
Replies
Thanks
Allan
Mitch
http://www.dns-dinamica.com/test_lst/index.html
Thanks for the link! However, when I load it up, I don't get any error. Could you specify what browser/platform and what actions you need to take in order to get this error?
Thanks
Allan
http://80.31.100.164/viajesteide/test_lst/glst1.php?idlst=001
Thanks for the second link - I do see the error here. It looks like your HTML is invalid - there is a spare "TH" element in the header - which is what is getting DataTables confused. It thinks there are 7 columns rather than 6 (since the tbody and thead cells don't match up).
As so as this is fixed, the problem should go away :-)
Allan
I do have some questions that let me being at a loss .Hope I can get your help.
I use Microsoft Visual Studio 2005 and Microsoft sql server 2005 as my development tools. The felow are my codes on using dataTables(the version is 1.5 Beta.7). I use a function named GetData to receive server-side data . I want to get the contents of the selected row of dataTables.To my surprise ,as for as the first ten rows concerned, the click event that I bind to the dataTables
do work accurately. That means the function fnFormatDetails() can be triggered as soon as t click the row which No is less than 10. But when the dataTables has more than 10 rows, the function fnFormatDetails() will never be triggered! I dont know whether my codes are wrong or not.
Be happy to get you answers.
function fnFormatDetails ( nTr )
{
var iIndex = oTable.fnGetPosition( nTr );
$("#show").css({display:"block"});
var aData = oTable.fnSettings().aoData[iIndex]._aData;
//the below codes is deleted
}
function GetData()
{
var param =$("#purid").val();
$.ajax({
type:"get",
/* the server-side process
url:"purcontractDetail.ashx",
data: ({purcontractid :"1"}),
dataType: "json",
async: false,
success:function(data){
aDataSet=data;
}
});
}
$(document).ready(function(){
/* define variables
var aDataSet;
var oTable;
var asInitVals = new Array();
/**get server-side data
GetData();
/*initialize the dataTables
oTable=$('#dlist').dataTable({
"bProcessing": true,
"aaData": aDataSet,
"aoColumns": [
{"sTitle":"num","bVisible":false },
{ "sTitle": "code"},
{ "sTitle": "name"},
{ "sTitle": "quantity"},
{ "sTitle": "unit"}
],
"oLanguage": {"sSearch": "Search all columns:"}
});
/*set table foot
$("tfoot input").keyup(function(){
/* Filter on the column (the index) of this element */
oTable.fnFilter(this.value, $("tfoot input").index(this)+1);
});
//* Add a click handler to the rows - this could be used as a callback */
$("#dlist tbody").click(function(event) {
$(oTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');});
$(event.target.parentNode).addClass('row_selected');
});
$("#dlist tbody tr").click(function(event){
/* the function to show the contents of selected nTr
fnFormatDetails(this);
});
$("tfoot input").each( function (i) {
asInitVals[i] = this.value;
} );
$("tfoot input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );
$("tfoot input").blur(function (i){
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
});
}
Yours
LZ
The problem is that your event handlers are only being added to the elements which are visible in the DOM. Have a look at the post-init events example for how to do this: http://datatables.net/examples/example_events_post_init.html
Also, I'm not sure why you used this thread about sData? It's probably best to open a new thread when bringing up a new issue.
Thanks,
Allan
I have resolved my problems with your suggestion ,thanks!
Also,I have another question for your precious idea . The felow :
I want to execute the pagination on server-side ,which means that I dont extract all mathced rows at a time . For example ,I only get the first 50 rows to show in my dataTables ,when I click the 'next Button ' on page ,the following 50 rows will be extracted from server-side and shown in dataTables.(suggest I have total 100 rows on server -side).
Yours
LZ
Server-side processing is a new feature in DataTables 1.5 (you can get the latest beta from the download page). Have a look here to see an example of this in action: http://datatables.net/1.5-beta/examples/data_sources/server_side.html
Having said that, 100 rows total really isn't that many. DataTables is more than capable of coping with this on the client-side if you wish to use it as such.
Allan
I've got the same error in case when i try generate table's ... with php mysql-request.
i checked myself drowing static table directly with html and in this case everything works fine.
it seems to me, that dataTable script "can't see" the values, which returned by my php-function, when trying analyze data type of the values in the table.
error message is (from FF console:
Error: sData is undefined
Sourse: http://sprestij.ru/jq/dt/media/js/jquery.dataTables.js
Line: 436
Table is very simple:
[code]
#??
????
?????
???
????????
?????????
???????
<? echo get_calls_data ($date); ?>
#??
????
?????
???
????????
?????????
???????
[/code]
one more thing i missed above
php function returnes string:
[code]
$res_str .= ''.$row[id].''.$row[date].''.$row[time].''.$row[manager_name].''.$row[source_name].''.$row[result_name].''.$row[comment].'';
[/code]
i tried to replace all $row[..] whith some symbols to check if the MySql DB datatypes joking on dataTable script but in vain.
So, it's clear that i don't understand smth referenced to server-side and client-side interaction...
I'm not some professional programmer.
Please, help me to find out my mistake and Thanks a lot for your work!
P.S. don't mind on the "??".. it's just russian letters with 1251 encoding.
Thanks
Allan
http://sprestij.ru/daily_stat.php
now, as u might see, i'm using localized for russian type of script...
but i also tried the original simpliest
$(document).ready(function(){
$("#example").dataTable()};
Try installed DataTables 1.5 beta 8 which fixes this issue: http://datatables.net/download
Allan
i updated the version up to 1.5 beta 8 as u told, but it didn't help.
take a look again at the URl i gave... there are two tables... fields and columns are the same... scripts for each too.. the one with php-generated rows doesn't work :(
have u got any more ideas?
i insert the
[code]alert(sData); [/code]
into your script at line 456 to see how it works and try for static table content which works.
it gave me the parsing flows by the column not by row...
so, i applied script to problem table. the first column of the table is just the sequent ids starting with "1".
alert window show me the first value = 1 (it's just a record_id from DB), then next obviously should be returned just "2", but alert window returning "undefined".
how could it be? i have no idea :(
one more thing why i'm sure the date-format doesn't matter.
i tried to generate table rows from php without selected from DB values just this way:
[code]
$res_str .= '
1
2009-02-01
11:22:00
Kate
internet
fine
no comments
';
}
echo $res_str;
[/code]
but even in this case i received "sData undefined" error...
so, i'm not proffy... here are some special workflow interaction which my skills can't make me understand...
help please!
Thanks in advance
The problem is that the HTML you generate is not valid here. Line 9 in the code you passed should be a closing tag - not an opening one! The extra opening tag resulted in the browser closing the old row and then opening a new empty one. With the empty row there was no data for DataTables to parse, which is where it was tripping up.
Try this:
[code]
$res_str .= '
1
2009-02-01
11:22:00
Kate
internet
fine
no comments
';
}
echo $res_str;
[/code]
Regards,
Allan
i'm such a looooooser!
Thanks!
Allan
I encountered this error several times when making changes t the layout of my tables and could not isolate the cause. It appears that in certain browsers, the "old" table structure (ie number of columns) remains cached, so even when you reload a (valid) page with a different number of table columns, you will encounter an "sData undefined" error. In some cases, I've had to close and re-open my browser following a change to a table layout in order to clear the browser's cache and get the error to resolve.
Are you using server-side processing or an Ajax source? In which catch IE will tend to cache the result of the XHR since it's only using GET. One way around this is to simply add a random variable to the end of the source address, which will ensure it's not cached.
Regards,
Allan
decided to up date to 1.7.5 from 1.5.? and got the following error in Firebug...
[code]DataTables warning (table id = 'tblSyncs'): Unexpected number of TD elements. Expected 217 and got 187. DataTables does not support rowspan / colspan in the table body, and there must be one cell for each row/column combination.[/code]
I just wanted to say thanks to Allan for putting this in, we all know how labourious it can be to comment code, but this was a real help (i had a lazy colspan in)... thanks again... have made a note to make a donation at Month End.....
Many thanks Allan! It was this that finally clued me into looking for a structural problem in my table and it turned out to be an extra[code] [/code], giving me a [code][/code] doubled opening tag. That probably gave me a miscount of the columns and the resulting "sdata is undefined" error as revealed by Web Developer. In a way, I got lucky as this structural problem had led to me having similar problems with other sorters - and I would have settled for using those and hence never found the datatables site, with its superior functionality, support and documentation. I don't yet know if I'll be making commercial use of it, but suspect I will and that warrants a donation. Actually, I think a small but reasonable donation will be in order every time I employ it on a site - this is a really good resource.