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

Question

全新的jquery和datatable.我想添加一个编辑按钮,调出一个显示所有可编辑字段的colorbox div.任何人都可以指出我如何实现这一目标的正确方向？

我能够为每个字段添加一个sClass,并使用fnDrawCallback回调从字段调用colorbox.但这有点混乱,我只是在每行的末尾都有一个按钮用于编辑目的.非常感谢任何指针.

Answer 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);
                        }
                    },

Answer 2

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

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

假设你想注入按钮，代码如下：

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