How to Add Columns to Jquery DataTable Dynamically

Question

I have a student Fee module, and I want to Generate Fee Class wise. Means Generate Fee for a whole Class, not for a Specific Student. DataTable will look like below..

|RegistrationNo | Name | AdmissionFee | TutionFee | SportsFee | Exam Fee| Discount |
------------------------------------------------------------------------------------
|    50020      |   A  |     1000     |     800   |    500    |   400   |   300    |
|    50021      |   B  |     1000     |     800   |    500    |   400   |   100    |

so on, whole class...

The problem is that the Fees are defined by school, so i have not a fix number of fees, e.g Transport Fee can be defined, Library Fee can be defined and any other fee that school wants can define. so these Fee Names come from a FeeDefination Table. Now how i should add these Fees to aoColumns as attribute. I have try the below code...

     var html = '[';
     var oTable = $('#GenerateFeeDataTable').dataTable({
                "bJQueryUI": true,
                "bServerSide": true,
                "bPaginate": false,
                "bFilter": false,
                "bInfo": false,
                "sAjaxSource": "/forms/StudentFee/studentfee.aspx/GenerateStudentFee?CampusId=" + campusId + "&ClassId= " + classId + '&Session=' + JSON.stringify(session) + "&FeeModeId=" + feeModeId,
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "type": "GET",
                        "dataType": 'json',
                        "contentType": "application/json; charset=utf-8",
                        "url": sSource,
                        "data": aoData,
                        "success": function (data) {
                            var data = data.d;
                            html += '{"sTitle":"Registration No","mDataProp":"RegistrationNo","bSearchable":false,"bSortable":false},';
                            html += '{"sTitle":"Student Name","mDataProp":"StudentName","bSearchable":false,"bSortable":false},';
                            html = html.substring(0, html.length - 1);
                            html += ']';
                            fnCallback(data);
                        }
                    });
                },
                "aoColumns": html
 });

How ever i have taken aoColumns attributes static in fnServerData, but these will not be fixed, i am just trying that i will work or not, but its not working..

My Questions are :
1) How to handle this situation, means how to add aoColumns dynamically.
2) How to get Header/Variables Name from JSON aaData, below is the Image to understand.

Is there any way to do such task, Any Help..

Answer 1

Instead of using jQuery DataTables for this situation, I suggest you use custom HTML tables. Then you can loop through the data (using jQuery's each iterator) and access (e.g.) the header columns by using loop parameters.

For example:

var data = data[0]; // access the first row only
$.each(data, function(k, v) {        // here k is an index and v is a value
    alert(k); // show the column's name in alert
    $('body').append('<table><tr><td>' + v.RegistrationNo + '</td></tr></table>');
}); 

Hope this helps.