Javascript DataTables 动态添加列到表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6197642/
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
DataTables add column dynamically to table
提问by Chad
I'm using DataTables (datatables.net) to display data from an Ajax source and having trouble customizing it. One thing I would like to do is add a column so I can have for example an 'edit' button for each row.
我正在使用 DataTables ( datatables.net) 来显示来自 Ajax 源的数据并且在自定义它时遇到了麻烦。我想做的一件事是添加一列，这样我就可以为每一行添加一个“编辑”按钮。
The closest thing to that in the examples is herebut I can't get that to work with an ajax source.
最接近示例中的内容是here，但我无法将其与 ajax 源一起使用。
Currently, I'm using the following code to display my table:
目前，我正在使用以下代码来显示我的表格：
fnServerObjectToArray = function ( aElements ){
return function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": function (json) {
var a = [];
for ( var i=0, iLen=json.aaData.length ; i<iLen ; i++ ) {
var inner = [];
for ( var j=0, jLen=aElements.length ; j<jLen ; j++ ) {
inner.push( json.aaData[i][aElements[j]] );
}
a.push( inner );
}
json.aaData = a;
fnCallback(json);
}
} );
}
}
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": 'get_data.php',
"fnServerData": fnServerObjectToArray( [ 'username', 'email' ] )
} );
});
回答by Jovan MSFT
Why don't you use fnRenderFunction in the aoColumns? As an example:
为什么不在 aoColumns 中使用 fnRenderFunction？举个例子：
aoColumns: [ { "bVisible": false} , null, null, null, null,
{ "sName": "ID",
"bSearchable": false,
"bSortable": false,
"fnRender": function (oObj) {
return "<a href='EditData.php?id=" + oObj.aData[0] + "'>Edit</a>";
}
}
]
You can use it to format the value from the server side.
您可以使用它来格式化服务器端的值。
See similar example on the http://jquery-datatables-editable.googlecode.com/svn/trunk/ajax-inlinebuttons.html(ignore specific settings for the editable plugin)
请参阅http://jquery-datatables-editable.googlecode.com/svn/trunk/ajax-inlinebuttons.html上的类似示例（忽略可编辑插件的特定设置）
回答by Nicola Peluchetti
I've created columns with edit button and links and so on, but usually i do everything server side by custominzg the data i return and then show/hide them with the aoColumns option. I don't really understand what you are tring to achieve: display server side data as a link?
我已经创建了带有编辑按钮和链接等的列，但通常我通过自定义返回的数据来完成服务器端的所有操作，然后使用 aoColumns 选项显示/隐藏它们。我真的不明白你想要实现什么：将服务器端数据显示为链接？
回答by naveen
Had the same problem a few months back. This is what I did.
By no means an elegant slution, but this worked.
几个月前有同样的问题。这就是我所做的。
绝不是一个优雅的解决方案，但这有效。
As you might already know, DataTables do have an overload to accept Javascript Arrays.
您可能已经知道，DataTables 确实有一个接受 Javascript Arrays 的重载。
So I made by $.ajax call. got my json, parsed it to a javascript array and then while parsing I created an extra element (an anchortag) with href="edit.php?email=passed_email"Then on the column headers and added a column called Edit. Those values were fed to "aaData" and "aoColumns". And then the table was populated.
所以我通过 $.ajax 调用。得到我的 json，将它解析为一个 javascript 数组，然后在解析时我创建了一个额外的元素（一个anchor标签），href="edit.php?email=passed_email"然后在列标题上添加了一个名为 Edit 的列。这些值被提供给“aaData”和“aoColumns”。然后表被填充。
And BTW, if you looking for inline editing, check the following link.
DataTables editing example - with jEditableplugin
顺便说一句，如果您正在寻找内联编辑，请查看以下链接。
数据表编辑示例 - 使用 jEditableplugin
