[英]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.