附加到每一行的jQuery Datatable动态编辑按钮答案

【问题标题】：jQuery Datatable dynamic edit button attached to each row附加到每一行的jQuery Datatable动态编辑按钮
【发布时间】：2010-04-09 23:21:33
【问题描述】：

对 jquery 和数据表完全陌生。我想添加一个编辑按钮，该按钮调用一个显示所有可编辑字段的颜色框 div。谁能指出我如何实现这一目标的正确方向？

我能够为每个字段添加一个 sClass 并使用 fnDrawCallback 回调从字段中调用颜色框。但这有点乱，我宁愿在每一行的末尾都有一个按钮用于编辑目的。非常感谢您的任何指点。

【问题讨论】：

但是没有任何答案可以真正解决我的问题。

标签： jquery datatables

【解决方案1】：

您可以通过 fnCreatedCell 回调在 aoColumnDefs 的列定义中添加内容下面将一个按钮添加到第一行，并带有一个 onclick 事件处理程序，该处理程序重定向到第一列中的值（这是您可能想要更改的东西。

"aoColumnDefs" : [ 
                    {
                        "aTargets": [0],
                        "fnCreatedCell" : function(nTd, sData, oData, iRow, iCol){
                            var b = $('<button style="margin: 0">edit</button>');
                            b.button();
                            b.on('click',function(){
                                document.location.href = oData[0];
                                return false;
                            });
                            $(nTd).empty();
                            $(nTd).prepend(b);
                        }
                    },

【讨论】：

【解决方案2】：

我会推荐使用出色的 DataTables Editable 插件。该插件使直接在表格中编辑字段变得非常容易。

如果你真的想在每一行上都有一个按钮，你可以在生成表服务器端时添加它，或者使用 jQuery 添加它。然后你需要将一个动作绑定到按钮上。

假设你想注入按钮，代码变成这样：

$('#form-id').delegate('.edit-button', 'click', function() {
   // action
}).find('.classname-of-field-for-button').html('<button class="edit-button">');

【讨论】：

不幸的是我不想使用内联编辑，因为数据表只包含几列，编辑表单更复杂。