DataTables: add column headers dynamically

rcholic

I am interested in creating a function that creates DataTables dynamically with the Data parameter passed in the function.

Below is what I wrote so far, the DataTables can add rows dynamically, but not the column header - can use some help here (I've read the DT API, but didn't find much help there).

[code]
var table2 = $('#example2').DataTable({
"paging" : true,
"ordering" : true,

 });


 // header row
table2.columns().header(data["header"]).draw();

 // create rows
 for (var prop in data["staff"]) {
    table2.row.add([
    data["staff"][prop].name,
    data["staff"][prop].position,
    data["staff"][prop].office,
    data["staff"][prop].age,
    data["staff"][prop].Start_date,
    data["staff"][prop].salary
    ]).draw();
 }

[/code]

The data I passed in to my function:

[code]
var data = {
"header": [
"Name",
"Position",
"Office",
"Age",
"Start_date",
"Salary"
],
"staff": [
{
"name": "Tiger Nixon",
"position": "System Architect",
"office": "Edinburgh",
"age": 61,
"Start_date": "2011/04/25",
"salary": "$320,800"
},
{
"name": "Garrett Winters",
"position": "Accountant",
"office": "Tokyo",
"age": 63,
"Start_date": "2011/07/25",
"salary": "$170,750"
},
{
"name": "Ashton Cox",
"position": "Junior Technical Author",
"office": "San Francisco",
"age": 66,
"Start_date": "2009/01/12",
"salary": "$86,000"
}
]
};
[/code]