DataTables 将列动态添加到表中答案

【问题标题】：DataTables add column dynamically to tableDataTables 将列动态添加到表中
【发布时间】：2011-09-06 01:26:22
【问题描述】：

我正在使用 DataTables (datatables.net) 来显示来自 Ajax 源的数据，但无法自定义它。我想做的一件事是添加一列，这样我就可以为每一行添加一个“编辑”按钮。

与示例中最接近的是here，但我无法让它与 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' ] )
    } );
});

【问题讨论】：

标签： javascript jquery gridview datatables

【解决方案1】：

为什么不在 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 上的类似示例（忽略可编辑插件的特定设置）

【讨论】：

谢谢，正是我想要的！
非常感谢这位伙伴。我在需要为我的 ajax 源数据表提供“操作”列的情况下使用它。

【解决方案2】：

我已经创建了带有编辑按钮和链接等的列，但通常我通过自定义返回的数据来完成服务器端的所有操作，然后使用 aoColumns 选项显示/隐藏它们。我真的不明白您要实现什么：将服务器端数据显示为链接？

【讨论】：

我想要实现的是能够添加一列（带有编辑按钮、链接等），就像您对任何数据源所说的那样。当然，该列中的每个字段都应该能够访问其相应行中的数据。因此，按照我的示例，我应该能够在列中同时显示用户名和电子邮件。
如果您只有服务器端解决方案，请发给我，我仍然可以使用它，但我希望有一个独立于数据源的解决方案。

【解决方案3】：

几个月前也遇到过同样的问题。这就是我所做的。
这绝不是一个优雅的解决方案，但这很有效。

您可能已经知道，DataTables do have an overload to accept Javascript Arrays。

所以我通过 $.ajax 调用。得到了我的 json，将其解析为 javascript 数组，然后在解析时创建了一个带有 href="edit.php?email=passed_email" 的额外元素（anchor 标记），然后在列标题上添加了一个名为 Edit 的列。这些值被馈送到“aaData”和“aoColumns”。然后表格被填充。

顺便说一句，如果您正在寻找内联编辑，请查看以下链接。
DataTables editing example - with jEditableplugin

【讨论】：

我没有带它。只需接受 json 请求并按照示例将其设为二维数组即可。然后按照示例将其分配给 aaData。
我指的是您添加列和链接的部分。请注意，我是 JS 新手，甚至是 jQuery 新手。
请发布您的示例 json 响应。我会尝试给予一些东西。
目前这样：{"aaData":[{"username":"johndoe","email":"johnd@gmail.com"},{"username":"janedoe","电子邮件":"janed@yahoo.com"}]}

【解决方案4】：

我对这个问题有一些 RND 并联系 this 希望这对你有帮助。

【讨论】：