Initializing a table that doesn't exist yet

ebarnett32

First - THANKS for this plug-in - it has saved me tons of time!

I'm new to JQuery and to Datatables so please bear with me.

The table I want to initialize doesn't exist on start-up but is created after a get call to retrieve XML. That XML is parsed and the table is created based on that parsing. So the flow is:

User clicks a button
the click event has a get call that returns an XML document
The XML document is parsed and a table is created
That table needs to be initialized using DataTable (I'm using Datatable for its built-in sorting capabilities primarily)

Here's snippets of the code:

// the button the user clicks


// function to handle the click of the above - this generates the table
$('#example').live('click', function() {
$.get('http://localhost/receipts.xml', function(data) {
$('#output').empty();
var html = '';

html += 'Store IDDate of purchaseTransaction ID';
$(data).find('Receipt').each(function() {

var dt = $(this).find('DateTime').text();
trans = $(this).find('TransactionID').text();
var ID = $(this).find('PartyID').text();
var date = dt.substring(0,10);
var time = dt.substring(11,19);

html += ' ';
html += '' + ID + '';
html += '' + date + ' ' + time + '';
html += '' + trans + '';

});
html += '';
$('#output').append($(html));
});

});
});

I've been pouring through the forum posts and documentation - I think there are a few ways I can do this but I'm not sure the best way to go. There are a lot of posts referring to using .live() to solve this but no examples - I can't seem to get it to work using this approach. I think I can put the .get for the XML directly in the initialization - in other words, create the table as part of the callback for the datatable call but again - not sure how.

So - I have several theories and ideas but can't quite seem to actually implement the solution.

As a side note - you'll notice another submit as part of the table - I have another function bound to that to expand the entry - it searches the XML again to find further information and create another table.

Any examples/feedback would be MUCH appreciated!!

Elliot

jaysonsmith35

hi






make money from home

ebarnett32

Everything I've read seems to indicate that putting the datatables call after the each statement (once the table is created and appended to the existing HTML) should work but it doesn't

This should be something straightforward but I can't seem to get it to work

allan

You can initialise a DataTable at any time - as long as the table is in the DOM. So I think yuor approach is exactly right - put the table into the DOM after the user as clicked the button - then run DataTables on it. Have a look at this example which puts a table into the document, and then initialises it with data: http://datatables.net/examples/data_sources/js_array.html

Allan

ebarnett32

Hi Allan
Thanks for getting back to me - and again - thanks for your work on this plugin - it is saving me TONS of implementation time on this project.

That's what I thought but it is not working - here's the code:

$('#example').live('click', function() {
$.get('http://localhost/receipts.xml', function(data) {
$('#output').empty();

var html = 'Store IDDate of purchaseTransaction ID';
$(data).find('Receipt').each(function() {

var dt = $(this).find('DateTime').text();
trans = $(this).find('TransactionID').text();
var ID = $(this).find('PartyID').text();
var date = dt.substring(0,10);
var time = dt.substring(11,19);

html += ' ';
html += '' + ID + '';
html += '' + date + ' ' + time + '';
html += '' + trans + '';

});
html += '';
$('#output').append($(html));
});
$('#rec_table').dataTable();
});

Does it not work when using append in this way? Should I create the header part of the table using the html call and then use aaData? Maybe it is just something obvious I am or am not doing in the above.

allan

I don't see anything obviously wrong with that I'm afraid... If you console.log( html ); after it has been constructed does it look like you would expect? I would guess so. Do you get any Javascript errors or anything like that?

Oo - just had a thought - try putting the dataTable() initialiser inside the 'get' function - just after you do the append. $.get might be doing it asynchronously so dataTable() would run before the server returns that data and that table is put into the dom...

Allan

ebarnett32

That is EXACTLY right! I just had to move it inside the get function. I am used to things being so much harder than they are in both JQuery and well designed plug-ins like yours. I find myself making things too hard on myself :-)

Thanks! This is going to work great for what I need!