sData undefined error

czj08c

I just started using datatables and like it so far. I'm getting the sData undefined error at line 701 of jquery.datatables.js. (else if ( typeof sData.charAt != 'function' )). I only get this error when I have no data to display. I did a search on this error and confirmed that my th's and td's match the definition. When I have no data the th and td's arent created. Did I just answer my own question? If so anyway around this error? Thanks

allan

Hi czj08c,

This error will occur when DataTables is trying to treat a variable as a string, when it isn't of String type. I've done some work in the last few releases to try and stop this from happening, but it can crop up now and then. Could you, ideally, post a link to an example where this is happening, or if this is not possible provide some code which will trigger the error. It would be good to get to the bottom of it!

Regards,
Allan

czj08c

Allan,
Thanks for replying so quickly. I can post a simple code sample. You'll notice that I'm using datatables with the MVC Contrib grid. I can get rid of that if need be.


$(document).ready(function() {
$('#example').dataTable({
"iDisplayLength": 10,
"aaSorting": [[0, "asc"]],
"aoColumns": [null, null,
null, { "bSortable": false}]
});
});



#example { width: 100%; }
#container { width: 600px; }


<% Html.Grid(Model).Columns(column => {
column.For(s => s.TextName).Named("Text Name");
column.For(s => s.Author).Named("Author");
column.For(s => s.ISBN).Named("ISBN");
column.For("Remove").Named("").Action(s => { %>

<% = Html.ActionLink("Remove", "RemoveText", new {tid = s.TextId, cid = s.CourseId})%>

<% });
})
.Empty("There are no text books assigned to this course")
.Attributes(id => "example").Render();%>


Thank you,
Glenn

allan

Hi Glenn,

Thanks for the reply. The DataTables initialisation looks fine, so it must be something to do with the data that your ASP.NET stuff is outputting. Would you be able to paste in an HTML table which is causing the issue? If you don't want to make it public you can send it to me using http://datatables.net/contact .

Thanks,
Allan

czj08c

When I stopped using the grid helper and just did a table, it fails with the same error even with data. Here is code now.

$(document).ready(function() {
$('#example').dataTable({
"iDisplayLength": 10,
"aaSorting": [[0, "asc"]],
"aoColumns": [null, null,{ "bSortable": false }]
});
});



#example { width: 100%; }
#container { width: 600px; }






Description
Active
Edit


<% foreach (var item in Model) { %>


<%= item.Description %>
<%= Html.CheckBox("active", item.Active, new { disabled = "true" })%>



<% } %>





Thanks, Glenn

czj08c

Allan,
As I looked at this again and at your sample, I noticed I'm missing the thead and tbody. When I add those in the above code works. I guess I still dont understand why it only fails with no data when I'm using the grid helper. The grid helper puts the thead and tbody into the HTML it creates. If its just an issue with the grid helper then I'm not too concerned. It doesnt add that much value over other ways of doing this.

Here is the source the grid helper creates for one of my other pages that fail with no data:


$(document).ready(function() {
$('#example').dataTable({
"iDisplayLength": 10,
"aaSorting": [[0, "asc"]],
"aoColumns": [null, null,
null, { "bSortable": false}]
});
});



#example { width: 100%; }
#container { width: 600px; }


Text NameAuthorISBNAlgebra 1Lawrence12340-676

Remove




Glenn

allan

Hi Glenn,

Thanks for the updates. Yes tbody and thead are absolutely required for DataTables to work ( http://datatables.net/usage/ ). If it encounters a complete empty table (ie ) then it should insert them automatically for you, but if it encounters , then I think all bets are off (unless you specify column information). So I guess the question is, what does the grid helper output when there is no data?

Regards,
Allan

czj08c

Allan,
This is what the grid helper produces if there is no data. This is after I get the jscript error and click continue.

There are no text books assigned to this course

Any ideas why it fails?

Thanks again,
Glenn

allan

Hi Glenn,

Ah - I think I've got it... The trouble is the aoColumns parameter in the initialisation object ( "aoColumns": [null, null,
null, { "bSortable": false}] ). You are telling it to expect four columns, but in fact the table only has one...

So what you could do is something like this:

[code]
$(document).ready(function() {
var aColumns = [null];
if ( $('#example thead th').length != 1 ) {
aColumns = [null, null,null, { "bSortable": false}];
}

$('#example').dataTable({
"iDisplayLength": 10,
"aaSorting": [[0, "asc"]],
"aoColumns": aColumns
});
});
[/code]
There are many ways to check for an "empty" table with the 'if' condition - but that one seemed to fit quite nicely.

One thing to note about this, DataTables will treat this as a regular row (since it doesn't know any better), and allow filtering etc on it... So it might not be quite the effect you are looking for. Possibly a better solution would be to remove the tr in tbody if the table is "empty". Something like:

[code]
$(document).ready(function() {
var aColumns = [null];
if ( $('#example thead th').length != 1 ) {
aColumns = [null, null,null, { "bSortable": false}];
} else {
$('#example tbody tr').remove()
}

$('#example').dataTable({
"iDisplayLength": 10,
"aaSorting": [[0, "asc"]],
"aoColumns": aColumns
});
});
[/code]
Then DataTables will do it's own 'zero records' message - with the added advantage that it will work fine for browsers without Javascript :-)

Lots of options here, but hopefully this will help.

Regards,
Allan

czj08c

Allan,
Thats got it! Makes sense now. Thanks for your help. I made a donation to the cause, yesterday (12/31).

Glenn

allan

Hi Glenn,

Good to hear that does the trick. Also thanks very much for the donation :-). Very much appreciated.

Regards,
Allan