如何动态添加列到Jquery DataTable

Question

我有一个学生费用模块，希望按班级生成费用。也就是为整个班级生成费用，而不是为特定的学生生成费用。DataTable将如下所示。

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

等等，整个班级...

问题在于，Fees是由学校定义的，因此我没有一个固定的费用数字，例如 Transport Fee 可以被定义，Library Fee 也可以被定义，以及任何学校想要定义的其他费用。所以这些费用名称来自于一个 FeeDefination 表格。现在我应该如何将这些费用作为属性添加到 aoColumns 中呢？我尝试了以下代码...

     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
 });

虽然我已经在fnServerData中静态地使用了aoColumns属性，但这些并不是固定的，我只是想尝试一下是否能够正常工作，但结果却没有成功。

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.

有没有办法完成这样的任务，需要帮助..

- Shahid Iqbal

Answer 1

针对这种情况，我建议你使用自定义HTML表格，而不是使用jQuery DataTables。然后您可以通过循环遍历数据（使用jQuery的each迭代器），并使用循环参数访问（例如）标题列。

例如：

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>');
}); 

希望这能帮到你。

- Idrees Khan