javascript 如何动态地向 Jquery DataTable 添加列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18800491/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Add Columns to Jquery DataTable Dynamically
提问by Shahid Iqbal
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. DataTablewill look like below..
我有一个学生费用模块，我想明智地生成费用类。意味着为整个班级而不是特定学生产生费用。DataTable看起来像下面..
|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 Feesare defined by school, so i have not a fix number of fees, e.g Transport Feecan be defined, Library Feecan be defined and any other fee that school wants can define. so these Fee Names come from a FeeDefinationTable. Now how i should add these Fees to aoColumnsas attribute.
I have try the below code...
问题是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
});
How ever i have taken aoColumnsattributes static in fnServerData, but these will not be fixed, i am just trying that i will work or not, but its not working..
如何过我采取了aoColumns在静态的属性fnServerData，但这些不会是固定的，我只是想，我将工作或没有，但它不工作..
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..
有什么办法可以完成这样的任务，任何帮助..
回答by Idrees Khan
Instead of using jQuery DataTablesfor this situation, I suggest you use custom HTML tables. Then you can loop through the data (using jQuery's eachiterator) and access (e.g.) the header columns by using loop parameters.
对于这种情况，我建议您不要使用jQuery DataTables，而是使用自定义 HTML 表格。然后，您可以遍历数据（使用 jQuery 的each迭代器）并使用循环参数访问（例如）标题列。
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.
希望这可以帮助。
