DataTables将列动态添加到表中

如何解决DataTables将列动态添加到表中

| 我正在使用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,{ \"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选项显示/隐藏它们。我不太了解您要实现的目标：将服务器端数据显示为链接？     ,        几个月前有同样的问题。这就是我所做的。 绝不是一个优雅的解决方案，但这是可行的。 您可能已经知道，DataTable确实有一个重载以接受Javascript数组。 因此，我通过$ .ajax进行了呼叫。得到我的json，将其解析为javascript数组，然后在解析时，我用

href=\"edit.php?email=passed_email\"

创建了一个额外的元素（一个

anchor

标记），然后在列标题上添加了一个称为Edit的列。这些值被馈送到\“ aaData \”和\“ aoColumns \”。然后填充表格。 顺便说一句，如果您要进行内联编辑，请检查以下链接。 DataTables编辑示例-使用jEditableplugin     ,        我在这个问题上有一些RND，并希望这个对您有帮助。