[英]DataTables add column dynamically to table
我正在使用 DataTables ( datatables.net ) 来显示来自 Ajax 源的数据并且无法自定义它。 我想做的一件事是添加一列,这样我就可以为每一行设置一个“编辑”按钮。
与示例中最接近的内容在此处,但我无法将其与 ajax 源一起使用。
目前,我正在使用以下代码来显示我的表格:
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' ] )
} );
});
为什么不在 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>";
}
}
]
您可以使用它来格式化来自服务器端的值。
请参阅http://jquery-datatables-editable.googlecode.com/svn/trunk/ajax-inlinebuttons.html上的类似示例(忽略可编辑插件的特定设置)
我已经使用编辑按钮和链接等创建了列,但通常我通过自定义返回的数据来完成服务器端的所有操作,然后使用 aoColumns 选项显示/隐藏它们。 我不太明白您要实现什么:将服务器端数据显示为链接?
我对这个问题有一些 RND 并得到这个希望这会对你有所帮助。
几个月前有同样的问题。 这就是我所做的。
绝不是一个优雅的解决方案,但这有效。
您可能已经知道, DataTables 确实有过载来接受 Javascript Arrays 。
所以我打了 $.ajax 电话。 得到了我的 json,将其解析为 javascript 数组,然后在解析时我创建了一个额外的元素(一个anchor
标记),带有href="edit.php?email=passed_email"
列。 这些值被馈送到“aaData”和“aoColumns”。 然后表格被填充。
顺便说一句,如果您正在寻找内联编辑,请查看以下链接。
DataTables 编辑示例 - 使用 jEditableplugin
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.