JQuery datatable dynamic edit button attached to each line

Question

completely new for jquery and datatable. I would like to add an edit button that calls the divbox colorbox, which displays all editable fields. can someone point me in the right direction how this can be achieved?

I managed to add sClass to each field and use the fnDrawCallback callback to call colorbox from the field. But this is pretty messy, and I rather just have a button at the end of each line for editing purposes. Thanks so much for any pointers.

Answer 1

You can add material on the fnCreatedCell callback in the column definition in aoColumnDefs, the following adds a button to the first row with an onclick event handler that redirects to the value in the first column (this is what you might want 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); } }, 

Answer 2

I would recommend using the excellent DataTables Editable plugin. The plugin makes it easy to edit fields directly in the table.

If you really want to have a button in each row, you can add it when you create a table column, or add it using jQuery. Then you will need to bind the action to the buttons.

Suppose you want to enter buttons, the code will look something like this:

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