jQuery Datatable动态编辑按钮附加到每一行 [英] jQuery Datatable dynamic edit button attached to each row

问题描述

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

我可以在每个字段中添加一个sClass，并使用fnDrawCallback回调从字段调用colorbox。但是这是一个凌乱的事情，我宁愿在每一行的末尾都有一个按钮进行编辑。非常感谢任何指针。

解决方案

您可以通过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 '，function（）{
 document.location.href = oData [0]; 
 return false; 
}）; 
 $（nTd）.empty（）; 
 $（nTd）.prepend（b）; 
} 
}，
  

totally new to jquery and datatable. I would like to add an edit button that call forth a colorbox div that displays all the editable field. can anyone point me in the right direction on how this can be achieved?

I was able to add a sClass to each field and use fnDrawCallback callback to call colorbox from field. But this is kind of messy and I rather just have a button at the end of each row for edit purpose. thanks very much for any pointers.

解决方案

You can add stuff by fnCreatedCell callback in a column definition in aoColumnDefs the following adds a button to the first row, with a onclick event handler that redirects to the value in the first column (this is somthing you might whant to change.

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

这篇关于jQuery Datatable动态编辑按钮附加到每一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！