title: How to Add Columns to Jquery DataTable Dynamically
body: <p>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. <code>DataTable</code> will look like below..</p>
  
  <pre><code>|RegistrationNo | Name | AdmissionFee | TutionFee | SportsFee | Exam Fee| Discount |
  ------------------------------------------------------------------------------------
  |    50020      |   A  |     1000     |     800   |    500    |   400   |   300    |
  |    50021      |   B  |     1000     |     800   |    500    |   400   |   100    |
  </code></pre>
  
  <p>so on, whole class...</p>
  
  <p>The problem is that the <code>Fees</code> are defined by school, so i have not a fix number of fees, e.g <code>Transport Fee</code> can be defined, <code>Library Fee</code> can be defined and any other fee that school wants can define. so these Fee Names come from a <code>FeeDefination</code> Table. Now how i should add these Fees to <code>aoColumns</code> as attribute. 
  I have try the below code...</p>
  
  <pre><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 + "&amp;ClassId= " + classId + '&amp;Session=' + JSON.stringify(session) + "&amp;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
   });
  </code></pre>
  
  <p>How ever i have taken <code>aoColumns</code> attributes static in <code>fnServerData</code>, but these will not be fixed, i am just trying that i will work or not, but its not working..</p>
  
  <pre><code>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.
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/pEdQl.png" alt="enter image description here"></p>
  
  <p>Is there any way to do such task, Any Help..</p>