Can't get DataTables to work at all

amccormick

I'm trying to get DataTables to work in SharePoint 2010. I'm linking it to a list and trying to display the data, but before I even get to that problem I want to address that I can't even use DataTables to output a simple list in a local html page. I'm using the example given in the example section. I haven't changed anything except putting the jquery/datatables links at the top. Here is the code I'm using:

[code]
<!-- jQuery -->


<!-- DataTables CSS -->


<!-- DataTables -->




$(document).ready(function() {
$('#demo').html( '' );
$('#example').dataTable( {
"aaData": [
/* Reduced data set */
[ "Trident", "Internet Explorer 4.0", "Win 95+", 4, "X" ],
[ "Trident", "Internet Explorer 5.0", "Win 95+", 5, "C" ],
[ "Trident", "Internet Explorer 5.5", "Win 95+", 5.5, "A" ],
[ "Trident", "Internet Explorer 6.0", "Win 98+", 6, "A" ],
[ "Trident", "Internet Explorer 7.0", "Win XP SP2+", 7, "A" ],
[ "Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", 1.8, "A" ],
[ "Gecko", "Firefox 2", "Win 98+ / OSX.2+", 1.8, "A" ],
[ "Gecko", "Firefox 3", "Win 2k+ / OSX.3+", 1.9, "A" ],
[ "Webkit", "Safari 1.2", "OSX.3", 125.5, "A" ],
[ "Webkit", "Safari 1.3", "OSX.3", 312.8, "A" ],
[ "Webkit", "Safari 2.0", "OSX.4+", 419.3, "A" ],
[ "Webkit", "Safari 3.0", "OSX.4+", 522.1, "A" ]
],
"aoColumns": [
{ "sTitle": "Engine" },
{ "sTitle": "Browser" },
{ "sTitle": "Platform" },
{ "sTitle": "Version", "sClass": "center" },
{ "sTitle": "Grade", "sClass": "center" }
]
} );
} );
[/code]

I am saving this as test.html and opening it up in my browser and it's a blank page. I'm sure I'm doing something wrong, as I'm very new to JavaScript / jquery, so don't be too harsh. Thanks.

tangerine

Your "link" and "script" tags for including external files are a mess. Check particularly the syntax for their "href"s.

allan

I think actually that's the forums syntax highlighting. Its trying to auto link them...

@amccormick - can you please link us to the page so we can take a look at it.

Allan

amccormick

That is the forums syntax.

Unfortunately I'm working on this from my local PC, I don't have it up on anything. The page is literally blank though when I open it in IE.

allan

I'm sorry - we really can't help in that case, since we have absolutely nothing to go on. If you could host the page on a server somewhere we could at least take a look, but at the moment, I've absolutely no idea what the problem is!

Allan

amccormick

I've given the code above... Copy and paste and save as test.html and open it for yourself. It should show a Datatable but it doesn't.

I'm not linking anything else. This is the entire code. Including jquery and datatables at top, and the example datatable copied directly from datatable examples.

I've never done this before and I'm not sure if I'm forgetting to include something or if my includes are wrong.

tangerine

If that really is your entire code, then you haven't got a HTML page at all.
Look at the page source for the simplest DataTable example in here, and notice the HTML tags:
, , , etc. etc.
If you really don't know rudimentary HTML, you're not likely to get more advanced concepts.

allan

Seems to work okay for me: http://live.datatables.net/iVol/1/edit

When you say it is the entire code - I presume you are making it valid HTML with the doctype, header etc.

Allan

amccormick

Tangerine, I know HTML and instead of telling me I am unlikely to learn more concepts, you could've tried helping. The underlying problem wasn't even an issue with my code.

Thanks Allan, I found out that there's an error in the version of IE I'm using, where it's not recognizing the link to jquery. So, the code is correct, IE just can't process it. I appreciate you being patient with me.

tangerine

I tried helping. But when you say "This is the entire code" and it actually isn't, you're not helping yourself.

allan

End of discussion - excellent to hear that you've got this working now @amccormick :-)