Dynamically create table headers and content

Baldric

Hi guys,

Hoping someone can show me the error of my ways.
I have read quite a bit of the forum and am *mostly* happy with using DataTables.

I have posted a fiddle here:
http://live.datatables.net/idinat/33/edit

Basically, I want to send variables to DataTables for both column headings and table content.
This will change each time I select the table (I have several tables created within a JQuery UI modal, each table on a separate tab).

I'm ok using thistable.empty() and thistable.fnDestroy() when the modal closes so that I can re-init the tables (with the new vaiables) when the modal is opened again. I would like to pass this dynamic data to each table and then init the table just before the modal is opened.

I have probably done something quite silly (missing init option), but I just can seem to get it working.

Any help would be appreciated.
B.

allan

You are giving it strings where it expects arrays: http://live.datatables.net/idinat/35/edit

Allan

Baldric

Allan,

I knew it! Something silly on my part.
Thank you for such a quick response.

One question, the column headings don't seem to be displaying on the reply fiddle.
Have I missed on init parameter?

B

Baldric

Hi guys,

I thought I'd include the code I have used to init and refresh the tables in case anyone else is searching on this topic.

The way my application works is as follows,

I am displaying alot of scheduled events using the jQuery fullcalendar plugin. This allows the user to filter and display a summary of certain types of events. Once the user has chosen a date, they click on the calendar and a JQuery UI modal pops up. Within this modal are a number of tabs with each tab having its own datatable. Depending on the user's initial filter selection and / or the number of events on a given day, there will be different number of data tables to init and various tabs / tables to hide.

As far as DataTables use goes, I am doing the following,

Although data tables can do it's own ajax calls, I am handling this myself and getting one large JSON array. I do this to find out which datatable needs to be initialized as well as return the required data for that table.

I have a function that steps through this array, calls the appropriate data table(s), packages up the required data and sends this to the correct table, hides any unneeded tabs and finally opens the modal.

The modal itself has an onClose function that clears any populated tables, then destroys them so the user is free to select another date and the process repeats itself.

*****************************************************************************************************

function initDataTables(this_table, table_data)
{
// table_data is the packaged object sent from the "unwrapping" function (table specific data)
// this_table is the DOM selector for the specific table i.e. #projecttable or whatever
var data = table_data.list;
var headers = table_data.header;

$(this_table).dataTable(
{
"iDisplayLength": 25,
"bProcessing": true,
"sDom": 'Rlfrtip',
"sScrollY": "400px",
"aaData": data,
"aoColumns": headers
});

// Add a click handler to the rows - this could be used as a callback
$(this_table).click(function(event)
{
$(this_table.fnSettings().aoData).each(function()
{
$(this_table.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
});
}

function destroyDataTables()
{
var possible_tables = new Array ("#projecttable","#trainingtable","#leavetable","#admintable","#netswitchtable")
for(this_table in possible_tables)
{
if ($(possible_tables[this_table]).dataTable())
{
console.log("Clearing :"+possible_tables[this_table])
$(possible_tables[this_table]).dataTable().empty();
console.log("Destroying :"+possible_tables[this_table])
$(possible_tables[this_table]).dataTable().fnDestroy();
}
else
console.log(possible_tables[this_table] + " does not exist")
}
}

**************************************************************************************************

The console.log entries are only to see what is happening as the tables are destroyed.

This all works perfectly except I am still having trouble with displaying the dynamic header information.
The contents of "headers" appears to be in the correct format, but I have tried using it as a string and also as an array. Still no joy.

If anyone else has been able to get the column headers working I'd appreciate some info.
Also I'd like to thank Allan for his fast response yesterday in pointing out my mistake in using DataTables.
DataTables really is a very powerful tool, kudos to Allan for his continued support.

B.

allan

> var headers = ["sTitle : FSNe", "sTitle : Project Name", "sTitle : Description", "sTitle : PrjTrk #", "sTitle : SAP #"] ;

You've got an array of strings there. You want an array of objects like in the documentation ( http://datatables.net/ref#sTitle ):

[code]
[
{ sTitle: "FSNe" },
{ sTitle: "Project Name" },
...
]
[/code]

Allan