Creating columns dynamically with Datatables Jquery

Question

I am using Datatables with server_processing to get data, the main issue is i dont want to specify the name of the columns in html (<th width="25" id ="th1">id</th>), I want to create columns dynamically when getting data by ajax.

My code is :

$('#table').dataTable( {

    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "server_processing.php?db="+pid+"&table="+id+"", //pid is the name of database and id the name of the table
     "bJQueryUI": true,
    "sPaginationType": "full_numbers"

} );             

Answer 1

"Although DataTables can obtain information about the table directly from the DOM, you may wish to give DataTables specific instructions for each individual column. This can be done using either the aoColumnDefs parameter, or aoColumns and the object information given for each column." — http://datatables.net/usage/columns

Something like:

html

<table class="display" id="table"></table>

js

$("#table").dataTable({
    bJQueryUI:true,
    aoColumns:[
        {mDataProp:"foo",sTitle:"Foo Title"},
        {mDataProp:"bar",sTitle:"Bar Title"}
    ],
    fnServerData: function( sUrl, data, fnCallback){
        $.get('data.php', function(res) {
            fnCallback({  // process results to match table format
                "sEcho":config.sEcho,
                "iTotalRecords":res.data.total || res.data.count,
                "iTotalDisplayRecords":res.data.count || res.data.total,
                "aaData":res.data.list
            })
        });
    }
})

Where data.php is

{
    data:{
        total:200,
        count:3,
        list:[
            {foo:"Foo 1",bar:"Bar 1"},
            {foo:"Foo 2",bar:"Bar 2"},
            {foo:"Foo 3",bar:"Bar 3"},
        ]
    }
}

There's also a good summary of setting this up here: http://datatables.net/usage/options#aaData