DataTables动态添加列到表格

Question

我正在使用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' ] )
    } );
}); 

- Chad

Answer 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（忽略可编辑插件的特定设置）

- Jovan MSFT

---

非常感谢你，伙计。我正在使用这个来为我的ajax数据表格需要一个“操作”列。 - user1017882

Answer 2

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

- Nicola Peluchetti

---

我想要实现的是，无论数据源如何，都能够向任何表格中添加一列（带有编辑按钮、链接等）。当然，该列中的每个字段都应该能够访问其对应行中的数据。因此，根据我的示例，我应该能够在该列中显示用户名和电子邮件。 - Chad

如果您只有服务器端的解决方案，请将其发送给我，我仍然可以使用它，但我希望有一个数据源无关的解决方案。 - Chad

Answer 3

几个月前我也遇到了同样的问题，这是我所做的。
虽然不是一种优雅的解决方案，但它确实有效。

正如你可能已经知道的那样，DataTables有一个重载函数可以接受Javascript数组。

所以我通过$.ajax调用获取了我的json数据，将其解析为Javascript数组，并在解析时创建了一个额外的元素（一个anchor标签），其中href="edit.php?email=passed_email"。然后在列标题上添加了一个名为“Edit”的列。这些值被提供给“aaData”和“aoColumns”。然后填充表格。

顺便说一下，如果你正在寻找内联编辑，请查看以下链接。
DataTables编辑示例 - 使用jEditable插件

- naveen

---

我手头没有它。只需按照示例将JSON请求转换为2D数组，然后根据示例将其分配给aaData。 - naveen

我指的是您添加列和链接的部分。请注意，我对JS很新，甚至对jQuery更加陌生。 - Chad

请发布您的示例JSON响应。我会尝试提供一些。 - naveen

{"aaData":[{"username":"johndoe","email":"[e-mail]"},{"username":"janedoe","email":"[e-mail]"}]} - Chad

Answer 4

我在这个问题上进行了一些研究并得到了此链接，希望这能对你有所帮助。

- Usman Hayat Khan