Need to Apply DataTables to Ajax-Sourced Table

ellipsis17

I am using jquery.dataTables.min.js, version 1.9.2.

I have created the following Fiddle page: http://jsfiddle.net/ellipsis17/5KceM/3/

However, the servers are not publicly accessible.

When the page loads, there is a statement in the first row saying "No data available in table". And then the correct data follows it. (I can write the correct data to the browser console, so I know my data returned from the server is correct.) Clicking on the column headers causes the data to disappear.

I suspect I am not following the correct code pattern for what I am trying to do, which is simply to load the table dynamically and then enjoy the benefits of the DataTables plugin. I have attempted passing several configuration objects to the dataTable constructor, with no success whatsoever.

I was particularly interested in this page: http://datatables.net/release-datatables/examples/ajax/objects.html

because the data I am getting back from my Ajax call is in fact an object with a single key ("tags") whose value is an array of objects.

Should I be loading the data into my table by means of the initialization call rather than loading the table, then trying to apply DataTables to it? If so, what parameters should I be passing to the initialization call? (The examples using the field sAjaxSource are a bit confusing to me, since I don't have a file, but rather a variable, tagsData.)

Why, for example, does this not work?

[code]
$(document).ready(function()
{
var $table = $("#tagsTable"),
$tbody = $table.children("tbody");

$.ajax({
type: "GET",
url: "http://localhost:1337/tags?uid=123",
success: function(tagsData)
{
$("#tagsTable").dataTable( {'aaData': tagsData['tags']} );
},
error: function(e) { console.log("error: " + e); }
});
[/code]

Any help much appreciated!

allan

Hi,

Thanks for picking up the support option!

To answer the basic question of why it doesn't work - based on the fiddle, you are adding the elements to the HTML table, after the DataTable has been initialised, but using jQuery/DOM methods, rather than the DataTables API. This is a problem for DataTables because it doesn't know that the DOM has changed (there are no events to say that this has happened - at least not in a cross browser and fully compatible way!) - so DataTables doesn't know that the table now has data...

So how to fix? Well, the easiest way is to let DataTables do the work for you...! Rewriting your Fiddle:

[code]
$(document).ready(function() {
$("#tagsTable").dataTable( {
sAjaxSource: "http://localhost:1337/tags?uid=5112",
sAjaxDataProp: "",
aoColumns: [
{ mData: "tagname" },
{ mData: "tagdesc" }
]
} );
} );
[/code]

This is assuming that your data looks like:

[code]
[
{ "tagname": "a", "tagdesc": "b" },
{ "tagname": "c", "tagdesc": "d" },
{ "tagname": "e", "tagdesc": "f" },
...
]
[/code]

Is that correct?

So in the above, we tell DataTables to load the JSON data ( sAjaxSource ), tell it that it is a flat array ( sAjaxDataProp ) and then tell it what data to use for each column in the table ( mData ).

Please note that this also required that you update to DataTables 1.9.4! (required for sAjaxDataProp as an empty string and also mData (was previously called mDataProp)).

Regards,
Allan

ellipsis17

Okay, I think we're closer. I have upgraded to version 1.9.4.

First off, my data actually looks like this:

[code]
{
"tags": [
{
"tagname": "a",
"tagdesc": "b",
...
},
{
"tagname": "c",
"tagdesc": "d",
...
},
...
]
}
[/code]

and I have my JQuery written like this:

[code]
$(document).ready(function() {
$("#tagsTable").dataTable( {
sAjaxSource: "http://localhost:1337/tags?uid=123",
sAjaxDataProp: "",
aoColumns: [
{ mData: "tagname" },
{ mData: "tagdesc" }
]
} );
} );
[/code]

You wouldn't actually want an A tag in the sAjaxSource field, would you?

When I load the page, I get the following alert message:

[quote]DataTables warning (table id = 'tagsTable'): Cannot reinitialise DataTable.

To retrieve the DataTables object for this table, pass no arguments or see the docs for bRetrieve and bDestroy[/quote]

I just rechecked and the table is being loaded exactly as the Fiddle page shows. (Just an empty pair of tbody tags where the data should go.)

allan

> You wouldn't actually want an A tag in the sAjaxSource field, would you?

Sorry - that's my forum software to auto link inside the code block...

Thanks for the update on the JSON structure, in which case, you want to use `tags` as the sAjaxDataProp (i.e. read the data from that JSON property):

[code]
$(document).ready(function() {
$("#tagsTable").dataTable( {
sAjaxSource: "/tags?uid=123",
sAjaxDataProp: "tags",
aoColumns: [
{ mData: "tagname" },
{ mData: "tagdesc" }
]
} );
} );
[/code]

Allan

ellipsis17

Hm, still getting the "Cannot reinitialise DataTable" message.

I am using:

[code]
$(document).ready(function()
{
$("#tagsTable").dataTable({
sAjaxSource: "http://localhost:1337/tags?uid=123",
sAjaxDataProp: "tags",
aoColumns: [{ mData: "tagname" },
{ mData: "tagdesc" }]
});
});
[/code]

where the actual value of the sAjaxSource field is:

[quote]http://localhost:1337/tags?uid=123
[/quote]

I can remove the message by removing the header row from my table, but then no data loads into the table.

It might be good to mention that I am actually using Jade for my HTML work, so the markup side of things looks like this to me:

[code]
table.datatable#tagsTable
thead
tr
th(style="background-color:lightblue;font-size: 12px;font-family: arial;text-align: left;border: 1px solid black;padding: 5px;") Tag Name
th(style="background-color:lightblue;font-size: 12px;font-family: arial;text-align: left;border: 1px solid black;padding: 5px;") Description
tbody
[/code]

But again, I have checked and the HTML is rendering as expected. I don't know what is counting as the first initialization of the table, besides maybe the inclusion of a header row.

allan

Hi,

There much be something else going on in that case - are you calling `$().dataTable()` anywhere else? You can call it, with initialisation parameters, only once for each table (call it again without parameters to retrieve the existing object), but if you are seeing that error, it suggests that it is being called multiple times.

Are you able to show me your full code? If you like, please e-mail it over as a reply to the invoice I sent this morning.

Regards,
Allan