[英]DataTables add column dynamically to table
I'm using DataTables ( datatables.net ) to display data from an Ajax source and having trouble customizing it.我正在使用 DataTables ( datatables.net ) 来显示来自 Ajax 源的数据并且无法自定义它。 One thing I would like to do is add a column so I can have for example an 'edit' button for each row.
我想做的一件事是添加一列,这样我就可以为每一行设置一个“编辑”按钮。
The closest thing to that in the examples is here but I can't get that to work with an ajax source.与示例中最接近的内容在此处,但我无法将其与 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' ] )
} );
});
Why don't you use fnRenderFunction in the aoColumns?为什么不在 aoColumns 中使用 fnRenderFunction? As an example:
举个例子:
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上的类似示例(忽略可编辑插件的特定设置)
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.我已经使用编辑按钮和链接等创建了列,但通常我通过自定义返回的数据来完成服务器端的所有操作,然后使用 aoColumns 选项显示/隐藏它们。 I don't really understand what you are tring to achieve: display server side data as a link?
我不太明白您要实现什么:将服务器端数据显示为链接?
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.所以我打了 $.ajax 电话。 got my json, parsed it to a javascript array and then while parsing I created an extra element (an
anchor
tag) with href="edit.php?email=passed_email"
Then on the column headers and added a column called Edit.得到了我的 json,将其解析为 javascript 数组,然后在解析时我创建了一个额外的元素(一个
anchor
标记),带有href="edit.php?email=passed_email"
列。 Those values were fed to "aaData" and "aoColumns".这些值被馈送到“aaData”和“aoColumns”。 And then the table was populated.
然后表格被填充。
And BTW, if you looking for inline editing, check the following link.顺便说一句,如果您正在寻找内联编辑,请查看以下链接。
DataTables editing example - with jEditableplugin DataTables 编辑示例 - 使用 jEditableplugin
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.